我是 AJAX 编程新手,但我在 jfiddle 上找到了一个与我想要实现的目标非常接近的示例。然而我无法让它发挥作用。我在标题中放置了对同一版本 jquery 的引用,但是当我点击“我的版本”上的提交按钮时,页面没有执行任何操作。此外,动画加载光标会永远旋转。这是 jfiddle 引用:
http://jsfiddle.net/clickthelink/Uwcuz/1/
这是我认为的相同版本。我一定做错了什么,但我真的不确定是什么。我似乎也无法使其在 StackOverflow 中工作。
$(document).ready(function(e) {
$("form[ajax=true]").submit(function(e) {
e.preventDefault();
var form_data = $(this).serialize();
var form_url = $(this).attr("action");
var form_method = $(this).attr("method").toUpperCase();
$("#loadingimg").show();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false,
success: function(returnhtml){
$("#result").html(returnhtml);
$("#loadingimg").hide();
}
});
});
});
body{
font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 13px;
}
form span{
display: block;
margin: 10px;
}
label{
display: inline-block;
width: 100px;
}
input[type="text"]{
border: 1px soild #ccc;
width: 200px;
padding: 5px;
}
input[type="submit"]{
padding: 5px 15px;
}
span#result{
padding: 5px;
background: #ff9;
}
img#loadingimg{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form method="post" action="/echo/html/" ajax="true">
<span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>
<span>
<label>Message: </label>
<input type="text" name="html" placeholder="Howdy..." />
</span>
<span>
<label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/> </label>
<input type="submit" value="Submit" />
</span>
</form>
最佳答案
SO 是沙盒的,不允许 ajax 通过。
对于原始示例,jsFiddle 有一种“fauxjax”类型的设置,当您使用 action="/echo/html/"
时,它将模拟 ajax 响应这就是为什么原始示例似乎可以工作(尽管它只是模拟的):
See the Jsfiddle Docs for more info on this feature
如果您尝试在自己的服务器等上运行此示例,请确保更新 <form method="post" action="/echo/html/" ajax="true">
中的操作属性。指向您的服务器或其他地方的文件,该文件将接收并响应您的 ajax 调用(如 php 脚本)
由于您是 Ajax 新手,了解 CORRS (Cross Origin Resource Sharing) 可能也会有所帮助。如果您尝试从一个域发送 ajax 请求并从另一个域接收和/或响应该请求,则这将适用。
关于javascript - 无法使 jfiddle 示例工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34541450/