使用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.