Fatal编程技术网
  • javascript/
  • Javascript 以JSON格式发送表单数据-浏览器更改内容类型

Javascript 以JSON格式发送表单数据-浏览器更改内容类型

javascript jquery html json

Javascript 以JSON格式发送表单数据-浏览器更改内容类型,javascript,jquery,html,json,http-headers,Javascript,Jquery,Html,Json,Http Headers,我正在尝试创建一个HTML页面，可以将表单数据以JSON的形式提交给服务器。我查阅了的答案，并使用以下代码执行此操作： <head> <title>Test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script ty

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

<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代理工具截获请求，我可以看到由于某种原因，请求离开浏览器后，内容类型就变成application/x-www-form-urlencoded。以下是请求的屏幕截图：

我想知道为什么这个请求会发生这种情况？为什么浏览器要更改请求中的内容类型？有更好的方法吗

PS：如前所述，我在没有使用XHR的jQuery的情况下尝试过这一点。

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

您可能想要做的是去掉该语句，并使用jQuery的.submit来处理表单提交。您还需要在jQueryAjax请求中指定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>
您的jQuery$.ajax请求没有指定URL，因此它只是访问您自己的网站，什么也不做。同时，HTML中的onload=javascript:document.myform.submit属性使用浏览器的常规表单提交，实际上是application/x-www-form-urlencoded

您可能想要做的是去掉该语句，并使用jQuery的.submit来处理表单提交。您还需要在jQueryAjax请求中指定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>
此外，您正在对数组而不是对象进行字符串化。以下是我为此所做的：

<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>
如果设置为使用序列化表单数据，请尝试以下操作：
此外，您正在串接数组而不是对象。以下是我为此所做的：

<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>
如果设置为使用序列化表单数据，请尝试以下操作：

经过测试，效果良好，只需在ajax中更新url即可。它不会将数据发送到服务器。它只是向服务器发送一个选项请求，就这样。服务器对选项请求的响应是什么？如果服务器说它不接受该内容类型，那么jQuery将不会继续处理该请求。它正在为请求提供正确的响应。请尝试查看jQuery是否在错误函数中给您一个错误。经过测试，这一切正常，只需在ajax中更新url即可。它不会将数据发送到服务器。它只是向服务器发送一个选项请求，就这样。服务器对选项请求的响应是什么？如果服务器说它不接受该内容类型，那么jQuery将不会继续处理该请求。它正在为该请求提供正确的响应。请尝试查看jQuery是否在错误函数中向您提供错误。我看到了代码的问题。但是，我仍然无法发出POST请求，因为浏览器禁止跨域请求。对，您可以使用jsonp执行get，但您需要修改服务器端代码以发出跨域POST。我看到了我的代码的问题。但是，我仍然无法发出POST请求，因为浏览器禁止跨域请求。对，您可以使用jsonp执行get，但需要修改服务器端代码以发出跨域POST