Question

我有一个基本的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脚本并填充其他表单字段）以及我遇到的问题。想法？

Answer 1

<强> 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

<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>

Answer 2

试试这个：

$.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？

Answer 3

Dennis，当数字字段失去焦点时，例如当用户点击另一个表单元素时，将触发此事件。您可以使用其他活动，例如form submit或change。

查看此jsfiddle进行演示。

<强> 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 );

    });
})

Answer 4

好的，需要更多信息。 “填写第一个字段后”是什么意思？

禁用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
    }
});

希望它有所帮助！

使用来自

4 个答案: