javascript - 无法使 jfiddle 示例工作

Question

我是 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>

Answer 1

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 请求并从另一个域接收和/或响应该请求，则这将适用。