【AJAX】AJAX进行前后台信息交互

最新推荐文章于 2022-05-18 09:52:29 发布

原创最新推荐文章于 2022-05-18 09:52:29 发布 · 750 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #数据

本文介绍了一种使用AJAX和JQuery技术实现表单数据提交的方法，这种方法无需页面刷新即可将数据发送到服务器端进行处理。通过具体的HTML与JQuery代码示例，展示了如何从表单中收集数据并将其以JSON格式发送。

用AJAX方法可将表单中的数据传至后台进行处理，而不需要进行页面的跳转，可以在当前页面完成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//用JQuery的方法实现 
<script>
$(document).ready(function(){
  $("#butt").click(function(){
    var val_ShenFZ = $(":input[name='ShenFZ']").val();
    var val_sex = $(":input[name='sex']").val(); 
    var val_name_parent = $(":input[name='name_parent']").val(); 
    var val_Zhuangtai = $(":input[name='Zhuangtai']").val();  
    var val_telephone =$(":input[name='telephone']").val();  
    var val_phone2 = $(":input[name='phone2']").val();  
    var url = "infor.php"; //处理数据的后台文件
      //传递参数，必须是JSON格式
    var args = {"ShenFZ":val_ShenFZ,
                "sex":val_sex,
                "name_parent":val_name_parent,
                "Zhuangtai":val_Zhuangtai,
                "telephone":val_telephone,
                "phone2":val_phone2,  
                "time":new Date()};  
      $.post(url,args,function(date){
         alert(date);
      });
  });
});
</script> 
</head>
<body>
<form>
 <div id="left">
身份证：<input type="text" name="ShenFZ"><br>
 性别：<input type="text" name="sex"><br>
家长姓名：<input type="text" name="name_parent"><br>
</div> 
 <div id="left">  
在籍状态：<input type="text" name="Zhuangtai"><br>
手机号码：<input type="text" name="telephone"><br>
 第二联系号码：<input type="text" name="phone2"><br>
</div>
</form> <br><br>
</div>  
<button id="butt" style="width:60px;height:30px">确定</button> 
</div>                                   
</body>
</html>