利用ajax异步处理POST表单中的数据

最新推荐文章于 2023-02-28 18:41:14 发布

原创最新推荐文章于 2023-02-28 18:41:14 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用jQuery的$.ajax方法实现表单数据的异步提交，避免页面跳转，提升用户体验。

//防止页面进行跳转

$(document).ready(function(){
  $("#submit").click(function(){
   var str_data=$("#form1 input[type=text]").map(function(){
     return ($(this).attr("name")+'='+$(this).val());
   }).get().join("&");
   var box_data=$("input[type=checkbox]:checked").map(function(){
     return ($(this).attr("name")+'='+$(this).val());
   }).get().join("&");
   var race=$("#race").val();
   var volume=$("#volume").val();
   str_data+="&volume="+volume;
   str_data+="&race="+race;
   str_data+="&"+box_data;
   $.ajax({
       type: "POST",
       url:"deal.php",
       data:str_data,
       success: function(msg){
         $("#myModal .modal-body").html(msg);
       }
    });
  });
});