Javascript 向另一台服务器发送ajax请求(特定示例不起作用)
编辑-已解决 谢谢大家花时间回复。经过几个小时的研究,我被引导到CORS,但结果证明我应该一直关注JSONP。我读了一些教程,我想我明白了。再次感谢 我试图做的是将用户输入从表单传递到我的服务器,这与表单所在的服务器不同。我不会把它写得太长,所以我会直接跳到代码上来 在下面的javascript代码中,由于安全问题,我将按标记名获取元素,我不想在html表单中使用名称属性。然后我将检索到的数据存储到一个JSON数据类型中,然后对其调用一个ajax函数Javascript 向另一台服务器发送ajax请求(特定示例不起作用),javascript,ajax,Javascript,Ajax,编辑-已解决 谢谢大家花时间回复。经过几个小时的研究,我被引导到CORS,但结果证明我应该一直关注JSONP。我读了一些教程,我想我明白了。再次感谢 我试图做的是将用户输入从表单传递到我的服务器,这与表单所在的服务器不同。我不会把它写得太长,所以我会直接跳到代码上来 在下面的javascript代码中,由于安全问题,我将按标记名获取元素,我不想在html表单中使用名称属性。然后我将检索到的数据存储到一个JSON数据类型中,然后对其调用一个ajax函数 function processFo
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);
}
现在发生的基本情况是,我得到的状态为0,readyState为1。你们能看出我做错了什么吗?请记住,我首先在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>
付款单
请填写下表,*为必填字段。
姓名:*
信用卡:*
CVV:*
届满月份:*
有效期:*
处理付款
您无法向另一台服务器发送AJAX请求,请参阅
解决方法是使用JSONP:跨源访问是一个问题,除非您允许域被列入白名单或使用JSONP,否则您无法做到这一点 假设您在域abc.com上,并且希望向域xyz.com发出请求。要做到这一点,您需要跨越域边界,这在大多数browserland是不允许的 绕过此限制的一项是标记。当您使用脚本标记时,域限制将被忽略,但在正常情况下,您无法对结果执行任何操作,脚本只会得到评估 输入JSONP。当您向启用JSONP的服务器发出请求时,您会传递一个特殊参数,该参数会告诉服务器一点关于页面的信息。这样,服务器就能够以页面可以处理的方式很好地包装其响应 jsonp实际上是克服XMLHttpRequest相同域策略的简单技巧。(正如您所知,不能将ajax(XMLHttpRequest)请求发送到其他域。) 因此,为了让js从另一个域获取数据,我们必须使用脚本html标记,而不是使用XMLHttpRequest,这些标记通常用于加载js文件。听起来怪怪的
事实证明,脚本标记可以以类似于XMLHttpRequest的方式使用 这可能是来自的副本。检查它,看看那里的答案是否符合您的需要:)如果您可以访问远程服务器,并且不需要它在旧浏览器上工作,那么最好使用CORScheers dude,很棒的答案。我将把我的代码重写回jQuery,因为我读到它非常适合JSONP
<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>