ajax请求时data数据格式

最新推荐文章于 2026-04-20 11:50:52 发布

转载最新推荐文章于 2026-04-20 11:50:52 发布 · 971 阅读

收录于

前端

本文介绍了一种使用HTML表单与AJAX进行数据提交的方法，通过不同方式发送表单数据到服务器，包括拼接URL参数、序列化表单为JSON数据等。同时还展示了如何使用jQuery库来辅助实现这些功能。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>     
    <form id="login"  method="post" action="result.jsp">
        <input name="user" type="text"/>
        <input name="sex" type="radio" value="man"/>
        <input name="sex" type="radio" value="woman"/>
        interest:
        <input type="checkbox" name="interest" value="piu">PIU
        <input type="checkbox" name="interest" value="dss">DSS
        <input type="checkbox" name="interest" value="ddr">DDR<br>  
        <input type="button" name="submit" value="submit" onclick="getFormInfo();"> 
    </form>
    <script type="text/javascript" src="./../js/jquery.min.js"></script>
    <script type="text/javascript" src="serializeJSON.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
    //第一种写法（拼接URL）
    function getFormInfo(){
        var name='wen';
        var user='chen';
        $.ajax({
         url: "/login/authenticate?name="+name+"&user="+user,
         type: "POST",
         data:{},
         dataType: "json",
         success: function(data){
             
          },
          error:function(err){
            console.log(err.statusText);
            console.log('异常');
          }
        });
    }
    //第二种写法（表单序列化为json数据）
    function getFormInfo(){
        var params=$('#login').serializeJSON();
        console.log(params);
        $.ajax({
         url: "http://192.168.10.32:6833/login/authenticate",
         type: "POST",
         data:params,
         cache:false,
         dataType: "json",
         success: function(data){
             
          },
          error:function(err){
          }
        });
    }
    // 第三种写法（表单序列化为字符串）
    function getFormInfo(){
        var params=$('#login').serialize();
        console.log(params);
        $.ajax({
         url: "http://192.168.10.32:6833/login/authenticate",
         type: "POST",
         data:params,
         cache:false,
         dataType: "json",
         success: function(data){
             
          },
          error:function(err){
          }
        });
    }
    //第四种写法（带json数据）
    function getFormInfo(){
        $.ajax({
         url: "http://192.168.10.32:6833/login/authenticate",
         type: "POST",
         data:{
            name:'chem',
            user:'wen'
         },
         cache:false,
         dataType: "json",
         success: function(data){
             
          },
          error:function(err){
          }
        });
    }
    //第五种写法（拼接data）
    function getFormInfo(){
        var name='chen';
        var user='wen';
        $.ajax({
         url: "http://192.168.10.32:6833/login/authenticate",
         type: "POST",
         data:'name='+name+'&user='+user,
         cache:false,
         dataType: "json",
         success: function(data){
             
          },
          error:function(err){
          }
        });
    }
    //第六种写法（既有全部直接获取表单中的数据又有单独出来的数据）
    function getFormInfo(){
        var params=$('#login').serializeJSON();
        console.log(params);
        params.height='20';
        $.ajax({
         url: "http://192.168.10.32:6833/login/authenticate",
         type: "POST",
         data:params,
         cache:false,
         dataType: "json",
         success: function(data){
             
          },
          error:function(err){
          }
        });
    }
    </script>
</body>
</html>