插入一個變量到數據屬性，AJAX

我敢肯定，這有一個簡單的解決方案，我錯過了。我有以下ajax腳本。插入一個變量到數據屬性，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發送。我嘗試了各種各樣的引用，並且似乎沒有任何工作....我做錯了什麼？

感謝提前

來源

2013-03-17 Gidon

您不應將'data'參數作爲字符串傳遞。只需'data：{name：ret}'。 – jolt 2013-03-17 13:01:05

@psycketom，這是不正確的是你想發送JSON數據（這似乎是這裏的情況，因爲OP已經將contentType請求頭設置爲「application/json」）。這是錯誤的是，他建立這個JSON手動使用字符串連接，而不是使用'JSON.stringify'方法，如我在下面的答案中所示。 – 2013-03-17 13:03:34

你似乎已經指定了一個絕對URL爲您的AJAX腳本：

http://10.0.0.8:9000/demo

看來你違反了內置於瀏覽器的same origin policy並阻止您發送跨域AJAX調用。

所以這個AJAX調用不能工作，除非這個HTML頁面託管在http://10.0.0.8:9000。

此外，你似乎有一個尾隨,這導致無效的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請求發送到您的服務器端腳本。

來源

2013-03-17 12:58:08

謝謝Darin，完美的作品！ – Gidon 2013-03-17 13:41:19

插入一個變量到數據屬性，AJAX

回答

相關問題