Question

我很确定这有一个我想念的简单解决方案。我有以下ajax脚本。

<!DOCTYPE html>
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function postForm() {
    var ret = $('#test').val();
    $.ajax({
            type: 'POST',
            url: 'http://10.0.0.8:9000/demo',
            data: '{"name" : '+ret'}',
            contentType: "application/json; charset=utf-8",

        })
    }

</script>
</head>
<body>
    <form id="ajaxForm" onSubmit="postForm(); return false;"  method="post"> 
        <input id="test" type="text" name="name" value="Hello JSON" /> 
        <input type="submit" value="Submit JSON" /> 
    </form>

</body>
</html>

我已将id ='test'的输入值拉到ret变量中。然后我试图将其插入数据属性并通过ajax发送。我尝试了各种各样的报价，似乎没有什么工作......我做错了什么？

提前致谢

Answer 1

您似乎已为AJAX脚本指定了绝对网址：

http://10.0.0.8:9000/demo

您似乎违反了浏览器中内置的same origin policy，并且阻止您发送跨域AJAX调用。

因此，除非在http://10.0.0.8:9000上托管此HTML页面，否则此AJAX调用无效。

此外，您似乎有一个尾随,，导致无效的JavaScript。我还使用JSON.stringify方法将请求正确序列化为JSON：

function postForm() {
    var ret = $('#test').val();
    $.ajax({
        type: 'POST',
        url: '/demo',
        data: JSON.stringify({ name: ret }),
        contentType: 'application/json; charset=utf-8',
        success: function(result) {
            // do something iwth the result of the AJAX call here
        }
    });
}

注意我在这里使用相对路径（url: '/demo'）以确保不违反相同的源策略，并确保将AJAX请求发送到同一域。

另一方面，如果您需要发送跨域AJAX调用，那么您有几种可能性，包括使用JSONP（仅限于GET请求）或CORS两者都涉及对服务器端的修改API。如果您无法控制服务器端API并且无法对其进行修改，则必须在您的域（托管包含此javascript的HTML页面的域）上编写服务器端脚本，该脚本将充当域和域之间的桥接/代理。远程域，然后将AJAX请求发送到服务器端脚本。

将变量插入数据属性AJAX

1 个答案: