Question

我正在尝试创建一个可以以JSON格式将表单数据提交到服务器的HTML页面。我查阅了this question的答案，并使用以下代码执行此操作：

<head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.ajax({
          type: "POST",
          data: dat,
          success: function(){},
          dataType: "json",
          contentType : "application/json"
        });
     });
   </script>
</head>

<body onload="javascript:document.myform.submit()">
<form action="http://www.foo.com/" method="post" name="myform">
    <input name="firstName" value="harry" />
    <input name="lastName" value="tester" />
    <input name="toEmail" value="testtest@test.com" />
</form>

但是，如果我使用Burp代理工具拦截请求，我可以看到，由于某种原因，一旦请求离开浏览器，Content-Type就会变为application/x-www-form-urlencoded。这是请求的屏幕截图：

enter image description here

我想知道为什么这个请求会发生？为什么浏览器会更改请求中的Content-Type？有更好的方法吗？

PS：我在没有jQuery的情况下试过这个（使用XHR解释here）。

Answer 1

你的jQuery $.ajax请求没有指定URL，所以它只是访问你自己的网站而什么都不做。同时，HTML中的onload="javascript:document.myform.submit()"属性正在使用浏览器的常规表单提交，实际上是application/x-www-form-urlencoded。

您可能想要做的是摆脱该陈述并使用jQuery的.submit来处理表单提交。您还想在jQuery AJAX请求中指定URL。

尝试这样的事情：

<head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
      $('#myform').submit(function() {
         var frm = $(this);
         var dat = JSON.stringify(frm.serializeArray()); 

         alert("I am about to POST this:\n\n" + dat);

         $.ajax({
             type: "POST",
             url: "http://www.foo.com/",
             data: dat,
             success: function(){},
             dataType: "json",
             contentType : "application/json"
         });
      });   
   </script>
</head>

<body>
    <form id="myform">
        <input name="firstName" value="harry" />
        <input name="lastName" value="tester" />
        <input name="toEmail" value="testtest@test.com" />
    </form>
</body>

Answer 2

此外，您正在将数组进行字符串化而不是对象。以下是我要做的事情：

<html>
<head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
     $(function() {
    //var frm = $(document.myform);
    //var dat = JSON.stringify(frm.serializeArray());
    var dat = {
        firstName: $('#firstName').val(),
        lastName: $('#lastName').val(),
        email: $('#email').val()
    }
    $('#myform').submit(function(e) {
        $.ajax({
            datatype : "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            url: '/local-url-to-controller.php',
            data: JSON.stringify(dat),
            success: function() {},
            error: function() {},
        });
        // Stops browser refresh
        e.preventDefault();
    });
    // Submit on document ready
    $('#myform').submit();
 });
 </script>
</head>
<body>
<form name="myform" id="myform">
    <input name="firstName" value="harry" id="firstName" />
    <input name="lastName" value="tester" id="lastName" />
    <input name="toEmail" value="testtest@test.com" id="email" />
</form>
</body>
</html>

如果您已开始使用序列化表单数据，请尝试以下操作： Convert form data to JavaScript object with jQuery

将表单数据作为JSON发送 - 浏览器更改内容类型

2 个答案: