如何发布ajax数据而不是标准表单数据

Question

I want to post a simple input field as json data to a webserver that i created. 我想将一个简单的输入字段作为json数据发布到我创建的Web服务器上。 Now i have done this: 现在我已经做到了：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>

$(document).ready(function(event){
        $('#postit').submit(function(){


            $.ajax({
              type: 'POST',
              url: 'http://ihavearealurltoaserverhere',
              contentType: 'application/json',
              dataType: 'jsonp',
              data: JSON.stringify($('#postit').serializeObject()),
                complete: function() {
                //called when complete
                alert("DOET HET");
              },

              success: function(data) {
                //called when successful
                alert("success DOET HET " + data);
             },

              error: function() {
                  alert("DOET HET niet");
                //called when there is an error
              }

        });




        });

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

});
</script>
</head>
<body>

<form id="postit">
  <input name='name' value='asd'>
 <input type="submit" value="Submit">


</form>

<pre id="result">moi
</pre>
</body>
</html>

If i now click on submit then in my webservice i receive 2 respones. 如果我现在单击提交，那么在我的网络服务中，我会收到2条回复。 In one i get a POST(checked with wireshark) where i got the normal form data(if i check with CGI) i see request_method = name="asd", and secondly for the AJAX post i receive a GET(as i can see in wireshark) with the restants of my URL so for example if i post to www.bla.com/test then i get test&{name:%asd} and in CGI i see this in a QUERY_STRING 在一个我得到一个POST（检查wireshark），在那里我得到正常的表格数据（如果我使用CGI检查），我看到request_method = name =“ asd”，其次我收到一个GET（如我所见）在Wireshark中）和我的URL的剩余部分，例如，如果我发布到www.bla.com/test，则得到test＆{name：％asd}，而在CGI中，我会在QUERY_STRING中看到它

Why does my ajax not just send it as normal post? 为什么我的Ajax不仅将其发送为普通帖子？

Anwser: make use of e.preventDefault(); 答案：使用e.preventDefault(); to stop the form from submitting. 停止提交表单。 and use $.post('http://example', JSON.stringify($('#postit').serializeObject())); 并使用$.post('http://example', JSON.stringify($('#postit').serializeObject())); instead of ajax because, if you use ajax with dataType:json from another domain then you get No 'Access-Control-Allow-Origin' and if you use jsonp then it actually won't post but use GET, see answer below for more details 而不是ajax，因为如果您将ajax与来自另一个域的dataType：json一起使用，则会得到No'Access-Control-Allow-Origin'；如果您使用jsonp，则它实际上不会发布，而是使用GET，请参阅以下答案以获取更多信息细节

Answer 1

You need to add e.preventDefault() to the top of your function, to stop the form from submitting. 您需要在函数顶部添加e.preventDefault() ，以阻止表单提交。

$('#postit').submit(function (e) {

    e.preventDefault();

    $.ajax({
        type : 'POST',
        url : 'http://ihavearealurltoaserverhere',
        contentType : 'application/json',
        dataType : 'jsonp',
        data : JSON.stringify($('#postit').serializeObject()),
        complete : function () {
            //called when complete
            alert("DOET HET");
        },

        success : function (data) {
            //called when successful
            alert("success DOET HET " + data);
        },

        error : function () {
            alert("DOET HET niet");
            //called when there is an error
        }

    });

});

如何发布ajax数据而不是标准表单数据

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-08-27 12:02:40

如何发布ajax数据而不是标准表单数据

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-08-27 12:02:40

解决方案1
2 已采纳 2015-08-27 12:02:40