jquery -ajax 提交表单（form）更换提交地址

最新推荐文章于 2022-07-30 17:29:30 发布

转载最新推荐文章于 2022-07-30 17:29:30 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/startphp/blog/124419

本文介绍如何使用jQuery的AJAX方法实现表单数据的序列化与提交功能，包括点击按钮触发AJAX请求、验证表单数据完整性和正确性等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

原生态手写部分:

<form    id="myForm" name="searchForm" method="post"><input type="text" name="abc" value=""><input type="button"   class='button' id="lastinput"  value="确认提交"/></form>

$(document).ready(function(){ 
$('#lastinput').click(function(){

          var len= $('#mainTable').find('tr').length;
           if(len <2){
            alert('请添加商品');
              return false; 
      }else{

      $.ajax({
         url:'<?php echo '/test_a.php';?>',//+keys, //后台处理程序
         type:'post',         //数据发送方式
         //dataType:'json',   //接受数据格式
         data:$("#myForm").serialize(),
         success:function(msg) {if(msg==1){
               // $('#lastinput').submit();
                 $("#myForm").attr("action", "/test.php").submit();
                 
             }else{
                alert('请检查所填内容是否有重复及空置项');
             } ;}   
                });

            
        }    
   });
 })

jQuery ajax中数据以键值对（Key/Value）的形式发送到服务器，使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对（key1=value1&key2=value2…）后提交。serialize() 方法使用标准的 URL-encoded 编码表示文本字符串。下面是使用serialize()序列化表单的实例：

jQuery ajax原型：

$.ajax({
   type: "POST",
   url: ajaxCallUrl,
   data: "Key=Value&Key2=Value2",
   success: function(msg){alert(msg);}
 });

ajax serialize():

$.ajax({
         type: "POST",
         url:ajaxCallUrl,
         data:$('#formID').serialize(),// 要提交的表单 
         success: function(msg) {alert(msg);}
     });

serialize()序列化表单实例：

<script type="text/javascript" src="/demo/jquery/jquery-1.7.2.min.js"
></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#button").click(function(){
     alert($("#myForm").serialize());
   });
});
</script>
<form id="myForm">
    姓名 <input value="liming" name="Name" /><br />
    职位 <input value="CEO" name="position" /><br />
        <input id="button" value="序列化表单" type="button" /> 
</form>

转载于:https://my.oschina.net/startphp/blog/124419