使用Ajax从mysql DB检索数据并将其打印到文本框

时间:2018-08-29 06:47:41

标签: php ajax

我有以下文本字段:

<input type="text" name="empid" id="empid" tabindex="1" onblur="getname()">
<input type="text" name="name" id="name" tabindex="2"/>
<input type="text" name="city" id="name" tabindex="3"/>
<input type="text" name="state" id="name" tabindex="4"/>

和数据库表是:

empid       name     city        state
EMP471      BBB      bbbbb       cccccc
EMP444      AAA      xxxx        yyyyyy

我是php新手。我在互联网上找到了一些代码来检索数据。但它不起作用。

Ajax代码是:

function getname() {
    var id=$("#id").val();   
    $.ajax({
        type:"post",
        dataType:"text",
        data:"id="+id,
        url:"getinsdata.php",   
        success:function(response)
        { 
            $("#name").val(response.name);   
            $("#city").val(response.city); 
            $("#state").val(response.state); 
        }
    });
}

而php代码是

<?php
    include 'connection.php';
    $id=$_POST['id'];
    $id=$_POST['id'];
    $query=mysql_query("select name,city,state from ins_master where id=$id");
    $result=mysql_fetch_row($query);
    echo $result[0];   
    exit;
?>

当选择Empid时,当使用AJAX在PHP中触发onb​​lur事件时,应在文本框中显示相应的名称,城市,州。

2 个答案:

答案 0 :(得分:1)

您要达到什么目标?发送数据并根据查询获得响应?获取一些数据?

我要去

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password"  id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<div id="answer"></div>
</body>
<script>
    $("#sub").click(function(event){
        event.preventDefault();
        query = $.post({
            url : 'check_ajax.php',
            data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
        });
        query.done(function(response){
            $('#answer').html(response);
        });
    });
</script>

这是check_ajax.php:

<?php
var_dump($_POST);

?>

在第二个文件中,但这是您进行查询并插入/选择的位置

正如人们所说,我们不是编写代码而是提供线索,由于它是基础知识/基础知识,所以我无能为力,因为您必须理解。复制粘贴并不是一个好主意

答案 1 :(得分:1)

尝试使用此html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script type="text/javascript">
        function getname(val) {
            $.ajax({
                url: 'getinsdata.php',
                type: 'POST',
                data: 'state_id='+val,
                dataType: 'json',
                success:function(data){
                    var len = data.length;
                    if(len > 0){
                        var id = data[0]['id'];
                        var name = data[0]['name'];
                        var city = data[0]['city'];
                        var state = data[0]['state'];

                        document.getElementById('name').value = name;
                        document.getElementById('city').value = city;
                        document.getElementById('state').value = state;    
                    }
                }
            });
        }
    </script>
</head>
<body>

    <form method="post">
        <input type="text" name="empid" id="empid" tabindex="1"  onblur="getname(this.value);">
        <input type="text" name="name" id="name" tabindex="2"/>
        <input type="text" name="city" id="city" tabindex="3"/>
        <input type="text" name="state" id="state" tabindex="4"/> 

    </form>
</body>
</html>

和getinsdata.php是

<?php
    include('connection.php');
    $id = $_POST['state_id'];
    $sql = "SELECT * FROM ins_master WHERE id='$id'";

    $result = mysqli_query($conn,$sql); 

    $users_arr = array();

    while( $row = mysqli_fetch_array($result) ){
        $id = $row['id'];
        $name = $row['name'];
        $city = $row['city'];
        $state = $row['state'];
        $users_arr[] = array("id" => $id, "name" => $name, "city" => $city, "state" => $state);
    }

    // encoding array to json format
    echo json_encode($users_arr);
    exit;
?>

与您的connection.php

<?php
$username = "";
$password = "";
$dbname = "";
    $conn = mysqli_connect("localhost",$username,$password,$dbname);
    if(!$conn){
        die("Error in Connecation");    
    }
?>

输入$ dbname =您的数据库名称