Question

这让我疯了。这是一个简单的例子，它可以得到。所有的链接都是绝对的，所以你应该能够将它复制到一个名为＆＃34; test.html＆＃34;的文件中，加载它，点击提交，然后看到单词＆＃34; empty＆＃34;更改为http://www.w3schools.com/php/welcome.php的结果。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $('#create').submit(function() {
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function(response) {
                $('#created').html(response);
            }
        });
        return false;
    });
});

</script>
</head>
<body>

<form id="create" method="POST" action="http://www.w3schools.com/php/welcome.php">
<input type="submit" value="Submit" />
</form>
<div id="created">empty</div>

</body>
</html>

当我点击提交时，没有任何反应。我做错了什么？

Answer 1

问题是您正在对w3shools进行跨域ajax调用，这是一个很高的安全风险，因此呼叫被阻止，您收到此消息：

XMLHttpRequest cannot load http://www.w3schools.com/php/welcome.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

您无权对该域进行ajax调用。要了解此事，您应该在计算机中创建一个新页面并对该页面进行ajax调用。

我希望我能帮到你。

问候。

Answer 2

您无权对该域进行ajax调用。

其次，当您指定action属性以形成标记和提交按钮时，您不需要它。您应该使用这两种方法中的任何一种。

两种方法的区别在于ajax不会将您的新页面重定向。

在这种情况下，您只需通过提交按钮

发布表单即可

<form id="create" method="POST" action="http://www.w3schools.com/php/welcome.php">
<input type="submit" value="Submit" />
</form>

看小提琴

http://jsfiddle.net/ghmoerov/

不工作 - 疯狂简单的jquery ajax表单提交并将响应放入div

2 个答案: