javascript 使用 jQuery 和 ajax 提交后填充表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32312604/
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
Populate a form after submit with jQuery and ajax from
提问by Dennis
I have a basic HTML form and want to preform a lookup with Ajax via a PHP file after filling in the first field, looking in an external feed for the values of the two second fields.
我有一个基本的 HTML 表单，想在填写第一个字段后通过 PHP 文件使用 Ajax 执行查找，在外部提要中查找第二个字段的值。
<form method="post" action="#">
<input name="number" type="text" id="number" value="" />
<input name="name" type="text" id="name" value="" />
<input name="email" type="text" id="email" value="" />
<button type"submit">
</form>
After filling in the first field (number), I want to do an Ajax call to a PHP file (submitting the filled in value) and look for the values of the two other fields (name and email). After the lookup fill in the found values in this form, user can edit if wanted and then submit.
填写第一个字段（数字）后，我想对 PHP 文件执行 Ajax 调用（提交填写的值）并查找其他两个字段（姓名和电子邮件）的值。在此表单中查找填写找到的值后，用户可以根据需要进行编辑然后提交。
The PHP file looks like this:
PHP 文件如下所示：
<?php
$number = $_GET["number"];
$url = "http://api.domain.com/lookup/$number";
$response = json_decode(file_get_contents($url), true);
?>
And will give a json response like this
并会给出这样的 json 响应
{
"name": "jacob",
"email": "[email protected]"
}
Now I need jQuery to complete this task (call the PHP script and populate the other form fields) and that's where I got stuck. Ideas?
现在我需要 jQuery 来完成这个任务（调用 PHP 脚本并填充其他表单字段），这就是我卡住的地方。想法？
回答by Maverick
AJAX
AJAX
Put this code between <head>and </head>tags of your form page and remember to call jquery framework.
将此代码放在表单页面的<head>和</head>标签之间，并记住调用 jquery 框架。
<script type="text/javascript">
$( "#number" ).keyup(function() {
numberval = $('#number').val();
$.ajax({
type: "GET",
dataType: "json",
url: "PHP-FILE.php", // replace 'PHP-FILE.php with your php file
data: {number: numberval},
success: function(data) {
$('#name').val(data["name"]);
$("#email").val(data["email"]);
},
error : function(){
alert('Some error occurred!');
}
});
});
</script>
FORM
形式
<form method="post" action="#">
<input name="number" type="text" id="number" value="" />
<input name="name" type="text" id="name" value="" />
<input name="email" type="text" id="email" value="" />
<button type"submit">
</form>
回答by Rifai
try this :
试试这个 ：
$.post('localhost/your_url.php',{number:$("#number").val()}, function(data,status) {
if(status=='success'){
var obj = jQuery.parseJSON(data);
$("#name").val(obj.name);
$("#email").val(obj.email);
}else{
//fail
}
});
cause the script above is use post please change php script to _POST or do you have any need why using _get ?
因为上面的脚本是使用 post 请将 php 脚本更改为 _POST 或者你有什么需要为什么使用 _get 吗？
回答by Tom Yates
Dennis, this event will be triggered when the number field loses focus, for example when the user clicks on another form element. You could use a different event like form submitor change.
Dennis，当数字字段失去焦点时会触发此事件，例如当用户单击另一个表单元素时。您可以使用不同的事件，例如form submit或change。
Check out this jsfiddlefor a demo.
查看这个jsfiddle的演示。
AJAX
AJAX
$('#number').focusout(function() {
var url = "http://api.domain.com/lookup/" + this.value;
$.get( url, function( data ) {
console.log(data);
$("#name").val( data.name );
$("#email").val( data.email );
});
})
回答by Julo0sS
Ok, need some more information. What do you mean with "after filling in the first field"?
好的，需要更多信息。“填写第一个字段后”是什么意思？
The 2 next fields are disabled until a "number" is written in the 1st field? the 2 next fields are available and have to work like the 1st one? (doing a data check on value change?)
在第一个字段中写入“数字”之前，接下来的 2 个字段将被禁用？接下来的 2 个字段可用并且必须像第一个字段一样工作？（对值变化进行数据检查？）
Sounds like you have to use an event handler anyway, like this with jquery :
听起来你无论如何都必须使用事件处理程序，就像 jquery 一样：
$(document).on('change keyup keypress','#number',function(){
//Do whatever you want with $(this).val() is the field current value;
});
check this example : http://jsfiddle.net/w12bbzmh/5/
检查这个例子：http: //jsfiddle.net/w12bbzmh/5/
About your $ajax, it's easy to do it with jquery, you can do it the way Rifai told, or like this (which is, to me, clearer)
关于你的 $ajax，用 jquery 很容易做到，你可以按照 Rifai 告诉的方式去做，或者像这样（对我来说，这更清楚）
$.ajax({
type : 'POST',//OR GET
url : '..',
data : {'name':'value','name1':'value1',...},
async : true or false,
cache : false,
success : function(response){
//handle your response (success)
//here you get your result, do whatever you need to do here
},
error : function(response){
//handle your response error
}
});
Hope it helps!
希望能帮助到你！
