Javascript 如何使用 AJAX 获取输入字段的值并将其传递给 PHP 字符串？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14196079/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Get The Value of an input field using AJAX and Pass it To A PHP String?
提问by Abhik
I am new to JavaScript, so pardon my lack of knowledge.
我是 JavaScript 新手，所以请原谅我缺乏知识。
I am trying to code a contact form and want to get the value entered in a particular input text field as soon as a value entered by the visitor using AJAX and pass it to a PHP string so that I can show relevant information based on the value entered before hitting the submit button.
我正在尝试编写联系表单，并希望在访问者使用 AJAX 输入值后立即获取在特定输入文本字段中输入的值并将其传递给 PHP 字符串，以便我可以根据该值显示相关信息在点击提交按钮之前输入。
How Can I do that using jQuery?
我如何使用 jQuery做到这一点？
Here are the codes I am using for the form:
以下是我用于表单的代码：
<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>`
I need the value of the URL input field to pass to a php string (as soon as the user checks the showdetails checkbok) so that I can process it in background to show information based on the url.
我需要将 URL 输入字段的值传递给 php 字符串（只要用户检查 showdetails 复选框），以便我可以在后台处理它以显示基于 url 的信息。
回答by mplungjan
Given this html:
鉴于此 html：
<form method="post" action="">
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<input type="text" id="subject" name="subject" />
<input type="text" id="url" name="url" />
<input type="checkbox" id="showdetails" name="showdetails" /> Show URL Details
<input type="submit" value="Submit" />
</form>
jQuery (checkbox)
jQuery（复选框）
$(function() {
$("showdetails").on("click",function() {
var url = $("#url").val();
if (url && $(this).is(":checked")) {
$.get("relevantinfo.php",
{ "url": url },
function(data){
// do something with data returned
}
);
}
else {
// clear relevant info here
}
});
});
The receiving end: Retrieving POST Data from AJAX Call to PHP
回答by Bharath Mg
get the input string using onchangeevent in text field .
使用文本字段中的onchange事件获取输入字符串。
ref : https://developer.mozilla.org/en-US/docs/DOM/element.onchange
参考：https: //developer.mozilla.org/en-US/docs/DOM/element.onchange
Then using that string content, call AJAX function.
然后使用该字符串内容，调用 AJAX 函数。
function load(string) {
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "YOUR_URL", true);
xmlhttp.send();
}
As suggested in the comments, use jquery + AJAX. For jquery,
正如评论中所建议的，使用 jquery + AJAX。对于jQuery，
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.divClass').html(data);
alert('Load was performed.');
}
});
