編輯 - 已解決。向其他服務器發送ajax請求(具體示例不起作用)
謝謝大家花時間回覆。經過數小時的研究,我被引導到CORS,但事實證明我應該一直在看JSONP。我讀了一些教程,我想我明白了。再次感謝。
我想要做的是將用戶輸入從表單傳遞到我的服務器,這與表單所在的服務器不同。我不會花太長的時間閱讀,所以我會直接跳到代碼。
在下面的JavaScript代碼中,我通過tagName獲取了安全問題的元素,我不想在我的html表單中使用名稱屬性。然後,我將檢索到的數據存儲到JSON數據類型中,然後我將其稱爲ajax函數。
function processForm() {
var i, userInput, inputType;
var name, creditNo, cvv, month, year;
var inputs = document.getElementsByTagName("input");
for (i=0; i < inputs.length; i++){
inputType = inputs[i].getAttribute('data-tajer');
userInput = inputs[i].value;
if (inputType == 'name') {
name = userInput;
}
else if (inputType == 'cc') {
creditNo = userInput;
}
else if (inputType == 'cvv') {
cvv = userInput;
}
else if (inputType == 'month') {
month = userInput;
}
// year
else {
year = userInput
}
}
var myJASON = {"name": name, "cc": creditNo, "cvv": cvv, "month": month, "year": year};
var strJSON = JSON.stringify(myJASON);
ajaxCall(strJSON);
}
現在的ajax調用,這應該是微不足道的。這裏唯一的區別是我的網址位於不同的服務器上。
function ajaxCall(param){
var url = 'http://blahbalh';
// jquery code snippet
var ajaxRequest;
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Please update your browser biatch!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
else {
alert("failed");
}
}
ajaxRequest.open("POST", url, true);
// param is the JSON data.
ajaxRequest.send(param);
}
基本上現在發生的事情是,我得到的0回狀態和1 readyState的你們能發現什麼,我做錯了什麼?請記住,我首先在jQuery中使用它,但它也不起作用。我接受任何解決方案和建議。
爲了方便,我將提供html表單。
<form id="paymentForm">
<h3>Payment Form</h3>
<h4>Please fill in the form below, * are required fields.</h4>
<div>
<label>
<span>Name: *</span>
<input placeholder="Please enter your name as it appears on your credit card." id = "name" type="text" data-tajer="name" tabindex="1" required autofocus>
</label>
</div>
<div>
<label>
<span>Credit Card: *</span>
<input placeholder="Please enter credit card number" type="text" data-tajer="cc" tabindex="2" required>
</label>
</div>
<div>
<label>
<span>CVV: *</span>
<input placeholder="Please enter CVV code found on the back of your card" type="text" data-tajer="cvv" tabindex="3" required>
</label>
</div>
<div>
<label>
<span>Expiry Month: *</span>
<input placeholder="Please enter the expiry month of your credit card" type="text" data-tajer="month" tabindex="4" required>
</label>
</div>
<div>
<label>
<span>Expiry Year: *</span>
<input placeholder="Please enter expiry year of your credit card" type="text" data-tajer="year" tabindex="5" required></input>
</label>
</div>
<div>
<button onclick="processForm()">Process Payment</button>
</div>
</form>
這可能是從http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain重複。檢查,看看是否有答案,滿足您的需求:) – jvilhena
如果你有機會到遠程服務器,你不需要它工作在舊的瀏覽器,它能夠更好地使用CORS – igor