dwr ajax方法提交表单（怎么使用ajax提交表单）

25-03-10 9

在这里，我们将给大家分享关于dwrajax方法提交表单的知识，让您更了解怎么使用ajax提交表单的本质，同时也会涉及到如何更有效地Ajax技术一ajax提交表单jqueryajax教程jsajax、a

在这里，我们将给大家分享关于dwr ajax方法提交表单的知识，让您更了解怎么使用ajax提交表单的本质，同时也会涉及到如何更有效地Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax、ajax 提交表单、ajax 提交表单与 submit 提交表单、ajax(三) ajax提交表单、ajax实现文件上传的内容。

本文目录一览：

dwr ajax方法提交表单（怎么使用ajax提交表单）
Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax
ajax 提交表单
ajax 提交表单与 submit 提交表单
ajax(三) ajax提交表单、ajax实现文件上传

dwr ajax方法提交表单（怎么使用ajax提交表单）

1，假设页面中有如下一个form表单

<form name="saveform"> 
<input type="text" name="userName" id="userName"/> 
<input type="password" name="passWord" name="passWord"/> 
</form>

2，现在需要用dwr方法提交表单，比如调用save()这个js函数：

function save(){	
var frm=DWRUtil.getValues(getValue$('saveform')); //getValues() 获得表单  getValue$() 这个函数是等同于document.saveform 
	userAjax.saveuser(frm,confirmcallback);
}

3,在userAjax中使用表单作为参数：这里是一个map：

	/**
	 * 保存基本信息
	 * formMap:提交的表单，可以通过key-value方式取得表单值
	 * @return
	 */
	public String savesuer(Map<String,String> formMap){ 
               String user=formmap.get("userName");
}

bookblog

dwr表单验证

Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax

ajax 提交表单

 $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/login" ,//url
                data: $(''#form1'').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.resultCode == 200) {
                        alert("SUCCESS");
                    }
                    ;
                },
                error : function() {
                    alert("异常！");
                }
            });

ajax 提交表单与 submit 提交表单

1.ajax 提交，通过 url 直接提交表单

$.ajax({
           type: "post",
           url: "/rechargeWithdrawalRecord/saveRecharge",
// 把表单数据拿到，提交全部数据

data:$("form").serialize(),
           dataType:"json",
           success: function(data) {
               if(data == 1){
                   layer.alert ('' 充值单生成成功！'', {
                       icon: 1,
                       title: "提示"
                   }, function(index){
                       //do something
                       window.parent.closeLayer();
                       layer.close(index);
                       }
                   );

2.submit 提交表单 , url 进行表单验证，submit 进行表单提交

   $.ajax({
           type: "post",
           cache: false,
           url: "${ctx}/account/accountCheckRepetition",
           data:{ditchAccountName:ditchAccountName, ditchAccount:ditchAccount, ditchId:ditchId},
           dataType:"json",
           async:false,
           success: function(data) {
               //alert(data);
               if (data==3) {
                   layer.msg ("账户名称和渠道账户都存在，请重新输入", {icon:0});
                   return;
               } else if (data==1) {
                   layer.msg ("账户名称存在，请重新输入", {icon:0});
                   return;
               } else if (data==2) {
                   layer.msg ("渠道账户存在，请重新输入", {icon:0});
                   return;
               } else {
                   $("#saveAccountFrom").submit();
               }
           }
       });
   }

ajax(三) ajax提交表单、ajax实现文件上传

式一：利用from表单的targer属性 + 隐藏的iframe 达到类似效果，支持提交含有文件和普通数据的复杂表单
方式二：使用jquery的 .ajax(..)，支持提交普通表单，但不支持含有文件的复杂@H_301_205@表单;( .post 或 .get底层用的都是 .ajax)
方式三：使用jquery插件ajaxFileUpload.js，支持上传文件，但不支持提交表单
方式四：使用jquery.from.js，支持提交同时含有文件和普通数据的复杂表单
个人四种都用过,更好喜欢第二种和第四种; 用第二种来解决ajax普通请求,用第四种来解决文件上传/表单提交; 不多说,上代码

方式一: from + iframe
Test1.jsp：表单、iframe、提交表单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面1,创建表单、iframe、提交表单</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<script type="text/javascript" src="..省略/jquery.1.8.2.min.js"></script>
<script> $(function() { //值得注意的是iframe会维护浏览器的历史,浏览器的后退/前进将根据ifream的访问历史来变化,而非主页面  $("#btn").click(function() { var value = $("#pic").val(); if (Utils.isEmpty(value)) { alert("请选择文件"); return false; } if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { alert("文件格式错误"); return false; } $("#form0").submit(); }); }); </script>
</head>
<body>
    <form id="form0" method="post" action="..省略/uploadOrgPic.html" enctype="multipart/form-data" target="hiddenFrame">
        上传头像: <input type="file" name="imageVo.image" id="pic" /> <input  type="button" value="提交" id="btn" />
    </form>
    <div id="result"></div>
    <iframe src="about:bland;" id="hiddenFrame" name="hiddenFrame" style="display: none;" frameborder="0"></iframe>
</body>
</html>

Test2.jsp：后台处理完成后的跳转页面 (后台处理代码此处就不贴了,上传文件相信大家都会的)

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面2，处理结果、返回父页面</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<script> window.onload = function() { //检查是否存在父窗口 if (window.parent != window) { var resultDiv = window.parent.document.getElementById("result"); resultDiv.innerHTML = '因为是测试,所以简单的来这么一句话'; } } </script>
</head>
<body>
</body>
</html>

方式二:$.ajax({..})
值得注意的是: serialize() 可通过序列化表单值,创建URL编码文本字符串,但不支持文件上传的表单

<script> $.ajax({ url : 你要请求的url链接,//默认为当前页面url aysnc : true,//是否异步,默认true  cache : true,//使用缓存,默认true  type : "POST",//请求方式,默认Get  dataType : 'JSON',//预期服务器返回的数据类型 (若不指定jquery将根据Http包MIME信息来判断)  headers : { 'ClientCallMode' : 'ajax' },//添加头部,也可通过beforeSend函数添加  data : $('#formid').serialize(),//要发送的数据,将自动转换为请求字符串格式。 此处为表单序列化后生成的字符串  success : function(data) { //执行成功的回调函数  alert("success"); },error : function(request) { //执行错误的回调函数(包含三个参数:XMLHttrRequest、错误信息、捕获的异常对象)  alert("error"); } }); </script>

方式三:使用jquery插件ajaxFileUpload.js，该方式提交时无需表单,也提交不了表单,只用于文件上传
若在文件上传同时还要传递其它的参数,通过设置data属性即可实现; 但如果需要的参数过多,则不建议使用这种方式,个人更倾向于方式四

<script> $("#uploadFile").click(function() { var value = $("#imageInput").val(); if (Utils.isEmpty(value)) { alert("请选择文件"); return false; } if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { alert("文件格式错误"); return false; } $.ajaxFileUpload({ url : 'url',secureuri : false,//是否启用安全提交,默认false  dataType : 'JSON',//预期服务器返回的数据类型  fileElementId : 'imageInput',//文件域id值  data : { 'name' : 'abc' },//其它参数  success : function(data,status) { alert(data); },error : function(data,status,_exception) { alert(_exception); } }); }); </script>

方式四：jquery.form.js

<script> function ajaxSubmitForm() { var value = $("#pic").val(); if (Utils.isEmpty(value)) { alert("请先选择文件"); return false; } if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) { alert("文件格式错误"); return false; } var option = { url : '..省略/uploadOrgPic.ac',type : 'POST',dataType : 'json',headers : { "ClientCallMode" : "ajax" },//添加请求头部  success : function(data) { alert(JSON.stringify(data)); },error : function(data) { alert(JSON.stringify(data) + "--上传失败,请刷新后重试"); } }; $("#form0").ajaxSubmit(option); return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交  } </script>

关于dwr ajax方法提交表单和怎么使用ajax提交表单的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于Ajax 技术一 ajax提交表单 jquery ajax教程 js ajax、ajax 提交表单、ajax 提交表单与 submit 提交表单、ajax(三) ajax提交表单、ajax实现文件上传等相关知识的信息别忘了在本站进行查找喔。

本文标签：