使用jQuery和ajax提交后填充表单
[英]Populate a form after submit with jQuery and ajax from
问题描述
我有一个基本的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>
填写第一个字段（数字）后，我想对PHP文件进行Ajax调用（提交填充值）并查找其他两个字段（名称和电子邮件）的值。 在查找填写此表单中找到的值后，用户可以编辑，如果需要，然后提交。
PHP文件如下所示：
<?php
$number = $_GET["number"];
$url = "http://api.domain.com/lookup/$number";
$response = json_decode(file_get_contents($url), true);
?>
并会给出像这样的json响应
{
"name": "jacob",
"email": "jacob@domain.com"
}
现在我需要jQuery来完成这个任务（调用PHP脚本并填充其他表单字段），这就是我遇到的问题。 想法？
4 个解决方案
解决方案1
3 已采纳 2015-08-31 13:53:02
AJAX
将此代码放在表单页面的<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 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>
解决方案2
0 2015-08-31 13:47:09
尝试这个 ：
$.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
}
});
因为上面的脚本是使用帖子请将php脚本更改为_POST或者你有什么需要使用_get吗？
解决方案3
0 2015-08-31 13:55:11
解决方案4
0 2015-08-31 13:55:39
好的，需要更多信息。 “填写第一场后”是什么意思？
禁用2个下一个字段，直到在第1个字段中写入“数字”？ 2个下一个字段是否可用，必须像第一个一样工作？ （对价值变化进行数据检查？）
听起来你必须使用事件处理程序，就像使用jquery一样：
$(document).on('change keyup keypress','#number',function(){
//Do whatever you want with $(this).val() is the field current value;
});
查看此示例： http ： //jsfiddle.net/w12bbzmh/5/
关于你的$ 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
}
});
希望能帮助到你！
jQuery / AJAX-解决Ajax后提交表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.