精华内容
下载资源
问答
  • AJAX提交表单内容

    2008-07-31 16:34:50
    ajax技术将表单中的控件内容全部提交
  • 本篇文章主要是对ajax提交url与ajax提交表单的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
  • ajax提交表单

    热门讨论 2011-10-22 12:45:40
    ajax提交表单 作为一个小例子 大家如果感觉有用就看看
  • 主要介绍了AJAX提交表单数据的方法,实例分析了Ajax调用的原理与实现技巧,需要的朋友可以参考下
  • 利用ajax提交表单完整流程
  • ajax提交表单到后台

    2019-01-19 17:15:28
    利用jquery的ajax提交表单数据到后台。后台使用spring.
  • ajax提交表单时阻止表单自动提交

    千次阅读 2017-07-12 11:36:16
    最近在用ajax提交表单,但表单会自动提交,action默认是当前页面,然后你提交会一直刷新页面,并且在地址栏会出现请求字段。 问题的原因是:ajax提交表单时,没注意到在form标签中添加onsubmit="return false;"。...

    最近在用ajax提交表单,但表单会自动提交,action默认是当前页面,然后你提交会一直刷新页面,并且在地址栏会出现请求字段。

    问题的原因是:ajax提交表单时,没注意到在form标签中添加οnsubmit="return false;"。。


    详细解析::

    众所周知,在表单中加上οnsubmit="return false;"可以阻止表单提交。 
    下面是简单的一小段代码: 

    代码
    1. <form action="index.jsp" method="post" οnsubmit="submitTest();">  
    2.     <INPUT value="www">  
    3.     <input type="submit" value="submit">  
    4. </form>  
    5.   
    6. <SCRIPT LANGUAGE="JavaScript">  
    7. <!--   
    8.     function submitTest() {   
    9.         // 一些逻辑判断   
    10.      return false;   
    11.     }   
    12. //-->  
    13. </SCRIPT>  

    大家判断像上面的写法,点击submit按钮该表单是否提交?

    若答案为是,就不用往下看了。

    若答案为否,错了。实际情况是表单正常提交,若想它不提交,应该将 

    代码
    1. <form action="index.jsp" method="post" οnsubmit="submitTest();">  
    改为 
    代码
    1. <form action="index.jsp" method="post" οnsubmit="return submitTest();">  

    为何?

    原来onsubmit属性就像是<form>这个html对象的一个方法名,其值(一字符串)就是其方法体,默认返回true;

    和Java一样,在该方法体中你可以写任意多个语句,包括内置函数和自定义函数,如 

    代码
    1. οnsubmit="  
    2.     alert('haha'); // 内置函数   
    3.     submitTest();  // 自定义函数  
    4.     alert(this.tagName); // 用到了this关键词  
    5.     ......(任意多条语句)      
    6.     return false;  
    7. "  

    就相当于 
    代码
    1. Form.prototype.onsubmit = function() {   
    2.     alert('haha'); // 内置函数   
    3.     submitTest();  // 自定义函数   
    4.     alert(this.tagName); // 用到了this关键词   
    5.     ......(任意多条语句)       
    6.     return false;   
    7. };  

    这样的话你就覆写了(override)其默认方法(默认返回true) 
    大家注意到方法体中可以用this这个关键词,这里即代表了<form>的对象实例。

    经过这样的分析后,以上情况就不难理解了: 

    代码
    1. <form action="index.jsp" method="post" οnsubmit="submitTest();">  
    这样写,override方法的效果为: 
    代码
    1. Form.prototype.onsubmit = function() {   
    2.     submitTest();   
    3. };  

    在这里submitTest()虽然返回false,但我们只执行了此函数,没有对其结果进行任何处理。而
    代码
    1. <form action="index.jsp" method="post" οnsubmit="return submitTest();">  

    override方法的效果为: 
    代码
    1. Form.prototype.onsubmit = function() {   
    2.     return submitTest();   
    3. };  

    这样,我们利用到了它的返回值,达到了预期效果。 
    这样理解的话我想印象会深刻得多,就不易出错了

    结论: 
    我们可以用Java里的思维方式来思考模拟JavaScript中的类似情况(JavaScript中基于prototype的面向对象技术也确实是这样做的),但他们毕竟还是有本质上的区别,如Java是强类型的,有严格的语法限制,而JavaScript是松散型的。象上述方法: 

    代码
    1. Form.prototype.onsubmit = function() {     
    2. };  

    既可以有返回值,又可以没有返回值,在Java里是通不过的,毕竟Java里面不能靠方法的返回值不同来重载(overload)方法,而JavaScript中的重载要松散得多


    展开全文
  • 利用Ajax提交表单

    千次阅读 2016-01-07 14:08:51
    利用Ajax提交表单

    Html表单

    用户名:<input type="text" name="username" id="username1"/><br>
    密码:<input type="password" name="password" id="password1""/><br>
    <input type="button" value="登陆" id="btn"/>

    Ajax部分

    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn").click(function(){
                    $.ajax({
                        type:'POST',
                        url:'${pageContext.request.contextPath}/Login/loginVerify',
                        //data发送请求数据,val()为文本内容
                        //不能进行输入写的Html标签文本内容用text()获取
                        data:{
                            username:$("#username1").val(),
                            password:$("#password1").val()
                        },
                        success:function(data){
                            //JS输出JSON数据
                            alert(data.message);
                        },
                        error:function(){
                            alert("服务器异常");
                        }
    
                    });
                });
            });
    
        </script>

    后台Servet部分

    @RequestMapping(value="loginVerify",method=RequestMethod.POST)
    public void loginVerify(HttpServletRequest request , HttpServletResponse response,User user) throws Exception{
            String username = user.getUsername();
            String password = user.getPassword();
            //设置response的编码方式
            response.setCharacterEncoding("utf-8");
            //设置response的返回数据类型,JSON数据
            response.setContentType("application/json;charset=utf-8");
            if(username==null||password==null||"".equals(username)||"".equals(password)){
                //JSON中写入字符串要用\"转义,''单引无效
                response.getWriter().write("{\"message\":\"账号或密码不能为空\"}");
                return;
            }else if("admin".equals(username)&&"1234".equals(password)){
                response.getWriter().write("{\"message\":\"账号密码正确!\"}");
                return;
            }else{
                response.getWriter().write("{\"message\":\"账号或密码错误!\"}");
                return;
            }
    
        }
    展开全文
  • 主要介绍了thinkPHP5 ajax提交表单操作,结合实例形式分析了thinkPHP5的ajax提交表单操作技巧,并附带说明了表单提交中的参数传递与处理技巧,需要的朋友可以参考下
  • 在开始介绍使用JQuery提交表单之前,先看一下非Ajax提交表单的形式
  • 这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
  • 主要介绍了jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法,在文中还给大家提到了jquery .ajax提交表单的写法,具体实例代码大家参考下本
  • ajax提交表单方式

    千次阅读 2016-03-02 17:06:08
    ajax提交表单遇到的问题,虽然有点久远了;但是今天他们遇到了就记录一下。 先说用ajax提交表单 方式一:ajax提交把formAddHandlingFee序列化参数然后提交,获取回传结果,做后续操作 function ...

    用ajax提交表单遇到的问题,虽然有点久远了;但是今天他们遇到了就记录一下。

    先说用ajax提交表单

    方式一:ajax提交把formAddHandlingFee序列化参数然后提交,获取回传结果,做后续操作

    function AddHandlingFeeToRefund()
            {
                var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";
                    $.ajax({
                        type: "POST",
                        dataType: "html",
                        url: AjaxURL + '?Action=' + 'SubmitHandlingFee' + '&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID %>").val()),
                        data: $('#formAddHandlingFee').serialize(),
                        success: function (result) {
                            var strresult=result;
                            alert("提交失败");
                        },
                        error: function(data) {
                            alert("提交失败");
                         }
                    });
            }

    方式二:用 jQuery.Form.js 插件的作用是实现Ajax提交表单。需要注意的是ajaxSubmit()不会自动阻止表单提交,想阻止表单提交,要自己return false;

    $("#form1".submit)(function(){
      $("#form1").ajaxSubmit();
       return false;
      })


    方式三:用ajaxform或者ajaxsubmit

    $("#MailForm").ajaxSubmit(function(message) {
        alert("表单提交已成功!");
      });
    <pre name="code" class="javascript">$("#goodsForm").ajaxForm(function(mes){
    			if(mes == "true"){
    				alert("提交成功");
    				window.close();
    			}else{
    				alert("提交失败");
    			}
    		});


     
    

    注意:ajaxsubmit()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数,也可以是一个options对象。该对象功能非常强大,说明如下:

         var options={

            url:url,      //form提交数据的地址

            type:type,     //form提交的方式(method:post/get)

            target:target,  //服务器返回的响应数据显示在元素(Id)号确定

            beforeSubmit:function(),  //提交前执行的回调函数

            success:function(),       //提交成功后执行的回调函数

            dataType:null,       //服务器返回数据类型

            clearForm:true,       //提交成功后是否清空表单中的字段值

            restForm:true,        //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态

            timeout:6000         //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。       

         }


    展开全文
  • 主要介绍了jQuery ajaxSubmit 实现ajax提交表单局部刷新 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • ajax提交表单小例子

    2008-07-17 15:47:16
    ajax提交表单,并对提交中文时的乱码进行处理.
  • TP5 ajax提交表单.pdf

    2021-09-13 15:52:08
    TP5 ajax提交表单.pdf
  • 主要介绍了Ajax提交表单页面刷新很快的解决方法,需要的朋友可以参考下
  • 主要介绍了jQuery使用$.ajax提交表单的方法,以完整实例形式分析了jQuery基于ajax数据提交的具体步骤与数据处理技巧,非常简单实用,代码备有详尽的注释便于理解,需要的朋友可以参考下
  • jquery用ajax提交表单

    千次阅读 2019-03-14 16:06:18
    jquery ajax三种方式异步提交表单 一、使用Html5 FormData对象的方式ajax异步提交数据和文件: 注意代码Jquery ajax的必须传参数processData: false,contentType: false,否则会报错: &lt;script src="...

    jquery ajax三种方式异步提交表单

    一、使用Html5 FormData对象的方式ajax异步提交数据和文件:

    注意代码Jquery ajax的必须传参数processData: false,contentType: false,否则会报错:

    <script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
    <form class="ajax_form">
      <input type="text" name="str" value="aiezu.com" />
      <input type="text" name="num" value="123456" />
      <input type="file" name="image"  />
      <button type="button" class="btn_submit">提交</button>
    </form>
    <script>
      $(function() {
        $(".btn_submit").on('click', function() {
          var data = new FormData($(".ajax_form")[0]);
          $.ajax({
            type: 'POST',
            dataType: 'json',
            processData: false, // 告诉jquery不要处理数据
            contentType: false, // 告诉jquery不要设置contentType
            data: data,
            url: '/test_form.php',
            success: function(json, textStatus, xhr) {
              //.....省略...
            },
            error: function(xhr, textStatus, errorThrown) {}
          })
        })
      })
    </script>
    

    优点:简单好用,能直接ajax异步提交数据和文件;
    缺点:部分浏览器支持不够好,如IE 10一下版本不支持;

    二、使用jquery serialize()函数构建数据或者手动构建数据对象方式:

    本方式建议在只异步提交基本数据,不需要异步上传文件的情况下使用:

    <script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
    <form class="ajax_form">
      <input type="text" name="str" value="aiezu.com" />
      <input type="text" name="num" value="123456" />
      <input type="file" name="image"  />
      <button type="button" class="btn_submit">提交</button>
    </form>
    <script>
      $(function() {
        $(".btn_submit").on('click', function() {
          var data = $(".ajax_form").serialize(); // str=aiezu.com&num=123456
          //或者
          var data = {str:$('[name="str"]').val(), num:$('[name="num"]').val()};
          $.ajax({
            type: 'POST',
            dataType: 'json',
            data: data,
            url: '/test_form.php',
            success: function(json, textStatus, xhr) {
              //.....省略...
            },
            error: function(xhr, textStatus, errorThrown) {}
          })
        })
      })
    </script>
    

    优点:简单好用,几乎兼容所有浏览器;
    缺点:无法ajax异步上传文件,只能异步提交基本数据;
     
    三、使用jquery from插件来ajax异步提交数据和文件:

    
    <script src="http://lib.sinaapp.com/js/jquery/1.10/jquery-1.10.0.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
    <form class="ajax_form">
      <input type="text" name="str" value="aiezu.com" />
      <input type="text" name="num" value="123456" />
      <input type="file" name="image" />
      <button type="button" class="btn_submit">提交</button>
    </form>
    <script>
      $(function() {
        $(".btn_submit").on('click', function() {
          var params = {
            type: 'POST',
            dataType: 'text',
            url: '/test_form.php',
            success: function(text, textStatus, xhr) {
              var json = eval(json);
            },
            error: function(xhr, textStatus, errorThrown) {
            }
          }
    
          $(".ajax_form").ajaxSubmit(params);
        })
      })
    </script>
    

    优点:自动判断浏览器是否支持html5 FormData,支持直接使用FormData提交,不支持时会使用iframe方式伪装ajax 异步提交;
    缺点:IE低版本响应类型只能是html、xml,否则会提示下载文件。

    展开全文
  • 使用AJAX提交Form表单

    2012-06-26 22:29:04
    使用AJAX提交Form表单使用AJAX提交Form表单使用AJAX提交Form表单
  • 在一般提交表单时,浏览器html将表单数据submit到...感觉在这里ajax与一般的提交表单的差别就是不用submit,而是采用了javascript, 而javascript中调用了具有传递与接收数据功能的XMLHTTPRequest等。 是不是这样的啊?
  • Asp+ajax提交表单实例

    热门讨论 2009-03-18 16:26:45
    Asp+ajax提交表单实例,很好用的啊.
  • 完成的 Ajax 提交表单

    2009-03-24 16:48:54
    该例子是使用 Ajax 提交 Ext 表单,并通过 success 和 failer 返回相应的值。
  • Ajax提交表单时实现验证码自动验证,验证码先检测正确性,不正确则不提交表单,更新验证码,php后端验证码检测,感兴趣的小伙伴们可以参考一下
  • 以下是Ajax 提交表单数据到入库的全盘操作流程,希望本文对广大php开发者有所帮助,感谢阅读本
  • 微擎开发模块之ajax提交表单

    千次阅读 2018-10-30 08:47:23
    微擎ajax提交表单 大家好,用了csdn这么久,从来没想着写点东西出来,这是我的第一篇博文,主要详细讲解一下微擎ajax提交表单机制。 html代码部分我们按照如下方式写 &amp;lt;form action=&quot;&...
  • Ajax提交表单报400 bad request错误

    千次阅读 2016-11-23 20:06:53
    Ajax提交表单报400 bad request错误
  • 前端笔记——jquery ajax提交表单

    千次阅读 2015-08-11 11:20:47
    jquery ajax提交表单最近才发现,jquery ajax提交表单可以这么简单$.ajax({ url: "udpate", type:"POST", data:$('#formId').serialize(), success: function(data){ alert(data); }, error:fu

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,647
精华内容 39,058
关键字:

ajax提交表单所有内容