使用Ajax從mysql DB檢索數據並將其打印到文本框

Question

我有以下文本字段：

<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中觸發onblur事件時，應在文本框中顯示相應的名稱，城市，州。

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

?>

在第二個文件中，但這是您應進行查詢並插入/選擇的地方

正如人們所說的，我們不是編寫代碼而是提供線索，由於它是基礎知識/基礎知識，所以我無能為力，因為您必須了解。 復制粘貼不是一個好主意

Answer 2

試試這個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 =您的數據庫名稱

使用Ajax從mysql DB檢索數據並將其打印到文本框

問題描述

2 個解決方案

解決方案1
1 已采納 2018-08-29 07:40:00

解決方案2
1 2018-08-29 07:47:07

使用Ajax從mysql DB檢索數據並將其打印到文本框

問題描述

2 個解決方案

解決方案1 1 已采納 2018-08-29 07:40:00

解決方案2 1 2018-08-29 07:47:07

解決方案1
1 已采納 2018-08-29 07:40:00

解決方案2
1 2018-08-29 07:47:07