使用数据库查找插入表单值而不刷新页面

时间:2013-11-23 15:40:28

标签: php jquery mysql ajax forms

我有一个包含5个字段的表单。 名称 姓 出生日期 占用 出生地

当用户填写姓名和姓氏时,我希望从数据库中填写表单的其余部分而不刷新页面或用户执行任何操作。

我正在使用php和jquery。

这是我的html页面:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" name="name" id="name">
<input type="text" name="lastname" id="lastname">
<input type="text" name="occupation" id="occupation">
<input type="text" name="date_of_birth" id="date_of_birth">
<input type="text" name="place_of_birth" id="place_of_birth">
<script type="text/javascript">

$('#lastname').blur(function () 
    {
        var name = $("#name").val();
        var lastname = $("#lastname").val();

    $.ajax({
        url: "get.php",
        type: "POST", 
        data: "name="+name+"&lastname="+lastname,
        success: function(data)
        {
            if (data == "Error")
            {
                alert("error-1"+data);
            }
            else
            {
                var fields = data.split(",");
                if (fields.length < 3) 
                {
                    alert("error-2"+data);  
                }
                else
                {

                    $("#occupation").val(fields[0]);
                    $("#date_of_birth").val(fields[1]);
                    $("#place_of_birth").val(fields[2]);

                }
            }
        },
        error: function(xhr, status, error) 
        {
               alert("error-3"+data);    
        }   
    });
});
</script>
</body>
</html>

这是php页面:

<?php
$name= $_REQUEST['name'];
$lastname= $_REQUEST['lastname'];
if($name == "mike" && $lastname = "brown")
{
    echo  "cook,1980-10-10,NYC";
}

?>

现在有效。

1 个答案:

答案 0 :(得分:1)

- 编辑#1 也许这个例子可以帮助你理解如何使用它:

$.ajax({
    url: "phppage.php",
    type: "POST", // Or get as you like
    data: "name="+name+"&lastname="+lastname,
    success: function(data)
    {
        // As i said, here in "data" you have what the server returned
        // You can return the last field delimited with a , and do something like:
        if (data == "Error")
        {
            // If something went wrong in your Database or invalid "name" or "last name"
            // You can return "Error" in the PHP page so the Javascript know something is wrong
            // and handle this error
        }
        else
        {
            var fields = data.split(",");
            if (fields.length < 3) {
                // As above.
                // Something went wrong or invalid response
            }
            else
            {
                // In fields array you have what server said.
                            // Here you can reload the page, change page do what you want
            }
        }

    },
    error: function(xhr, status, error) 
    {
        // Error here
    }   
});

它将名称和姓氏传递给服务器并等待响应,如: FIELD1,FIELD2,字段3

PHP页面应该是......

<?php

// Connect to the server
// Send query to the server

if ($isEverythingOK) {
    echo $field1 . "," . $field2 . "," . $field3;
}
else {
    echo "Error";
}

?>

Ajax - jQuery Ajax + PHP页面

一个php页面,您传递5个字段,将其添加到数据库中,如果一切正常则返回“OK”之类的内容,如果出现问题则返回错误。

实施例

$.ajax({
    url : "URL to PHP page",
    success : function (data) {
          if (data === "OK") { /* all ok, here you can update the page to show the new field */ alert("OK"); }
          else { /* Error */ alert("Error"); }
    },
    error : function (xhr, status, error) {
        // Request error
        alert("Error");
    }
});