Question

如果有像

这样的html表单

<form method="POST" action="http://.../file.php">
    <input type="text" name="data" id="data" />
    <input type="submit" />
</form>

我想用jQuery创建一个ajax-request，但我不想使用不可见的表单来提交它。但不知怎的，我不能让它发挥作用。我的尝试是

$.ajax({
    type: "POST",
    url: "http://.../file.php",
    data: d,
    success: function(msg){
        alert( "Data Saved: " + msg );
    }
});

是d包含一个JSON对象，我只是将其粘贴在上面的表单字段中作为明文。成功函数被执行，但我没有从服务器得到答案（这意味着必须出错： - ）

Answer 1

你在同一个域上发帖吗？ Ajax不能跨域工作。

Answer 2

您只需创建一个json对象即可通过

发送

function postData (data) {
    $.ajax({
        type: "POST",
        url: "http://.../file.php",
        data: { data: data },
        success: function(msg){
            alert( "Data Saved: " + msg );
        }
    });
};

postData("xyz");

或者，如果你想让它更通用，你可以做

function postData (data) {
    $.ajax({
        type: "POST",
        url: "http://.../file.php",
        data: data,
        success: function(msg){
            alert( "Data Saved: " + msg );
        }
    });
};

postData({input1: "x", input2: "y", input3: "z" });

最后一个允许您更灵活，而不必不断地重写AJAX的输入。

Answer 3

data必须是一组键/值对才能使帖子请求成功。您不能指定任意javascript对象，也不能简单地将表单中的html粘贴为字符串。如果d不是设置键/值对，则您的请求将会出错。

以下是有效数据对象的示例：

var d = {foo:'bar',fizz:'buzz'};

Answer 4

jQuery Form Plugin将有助于您的代码干净。

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="jquery.form.js"></script> 

    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>
<body>
    <form id="myForm" action="comment.php" method="post"> 
        Name: <input type="text" name="name" /> 
        Comment: <textarea name="comment"></textarea> 
        <input type="submit" value="Submit Comment" /> 
    </form>
</body>

their website提供了更多选项。

什么是jQuery ajax相当于这个html-form提交？

4 个答案: