不能让一个小例子工作

Question

我是AJAX编程的新手，但我在jfiddle上找到了一个非常接近我想要完成的例子。但是，我无法使其发挥作用。我在标题中引用了相同版本的jquery，但是当我点击“我的版本”中的提交按钮时，该页面没有做任何事情。此外，动画加载光标永远旋转。这是jfiddle参考：

http://jsfiddle.net/clickthelink/Uwcuz/1/

以下是我认为的相同版本。我一定做错了什么，但我真的不确定是什么。我似乎也无法在StackOverflow中使用它。

＆＃13;

＆＃13;

$(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();                    
            }           
        });    
        
    });
    
});

＆＃13;

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;                   
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

SO是沙盒，不允许ajax通过。

至于原始示例，jsFiddle有一种“fauxjax”类型的设置，当你使用$(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop != 0) { $('#test_box').css({ "background-color": "red", "height": '400px' }); } else { $('#test_box').css({ "background-color": "blue", "height": "200px" }); } });时模拟 ajax响应，这就是原始示例出现的原因工作（虽然只是模拟）：

See the Jsfiddle Docs for more info on this feature

如果您尝试在自己的服务器上运行此示例等，请确保更新<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="test_box" style="height: 200px; width: 200px; background-color: red;"></div>中的操作属性以指向服务器或其他地方的文件，该文件将接收并响应您的ajax调用（如php脚本）

由于您是Ajax的新手，如果您尝试从一个域发送ajax请求并从中接收和/或响应，则了解CORRS (Cross Origin Resource Sharing)也可能会有所帮助。另一个域。

Answer 2

它在这里不起作用，因为http://stackoverflow.com无法向http://stacksnippets.net/echo/html/发送原始请求

它可能不适合您，因为您的后端没有/echo/html服务