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

痛定思痛。 2021-09-26 01:52 400阅读 0赞

用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>