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

我试图创建一个HTML页面，可以将表单数据以JSON的形式提交给服务器。我咨询了答案this question和我使用下面的代码来做到这一点：作为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="[email protected]" /> 
</form>

不过，如果我使用打嗝代理工具拦截请求，我可以看到，由于某些原因，在Content-Type成为application/x-www-form-urlencoded为一旦请求离开浏览器。这里的请求的截图：

enter image description here

我想知道为什么会出现这种情况与要求？为什么浏览器在请求中改变Content-Type？有一个更好的方法吗？ PS：我试过没有jQuery（使用XHR，如解释here）。

来源

2014-07-10 Rahil Arora

你的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="[email protected]" /> 
    </form> 
</body>

来源

2014-07-10 18:44:40 andrezsanchez

我看到我的代码的问题。但是，我仍然无法发出POST请求，因为浏览器禁止跨域请求。 –

没错，你可以用jsonp搞定，但是你需要修改服务器端代码，以使 – user1572796

而且你是字符串化数组不是对象。下面是我会为这个做：

<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="[email protected]" id="email" /> 
</form> 
</body> 
</html>

如果您正在使用序列化形式的数据集，尝试这样的事情： Convert form data to JavaScript object with jQuery

来源

2014-07-10 18:54:35 user1572796

经过测试，并且这个工作正常，只需更新ajax中的url，你就可以开始。 – user1572796

它不会将数据发送到服务器。它只是发送一个OPTIONS请求到服务器，就是这样。 –

什么是来自服务器的OPTIONS请求的响应？如果服务器说它不接受Content-Type，那么jQuery将不会继续请求 – andrezsanchez

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

回答

相关问题