Question

这是我第一次来这里，所以我很抱歉，如果我不太喜欢你们所有人。

在学习AJAX的过程中，我是全新的，但需要为我们的员工网站完成一个页面。

我有一个页面（php），它通过所有患者的mysql查询构建一个列表。我绝对没有问题。但是，我坚持这一部分。

当用户点击特定行（又名患者姓名）时，我希望它在右侧的mysql数据库中提取与其相关的患者的详细信息，以便页面无需刷新和它们不会被引导到任何其他页面。

我遇到了类似这样的例子，例如你点击名字，右边的div显示包含电子邮件，电话等。

有没有人有任何好的起点？我尽可能地搜索，并且我开始认为在搜索我的答案时我没有使用正确的语言。

提前感谢...马特

Answer 1

使用jQuery。首先，您需要在服务器上创建Web服务。 Web服务将接受一个POST参数，该参数将是患者姓名或患者ID。基于此id / name，您将查询MySQL数据库，获取所有详细信息并返回为json。

在前端，您可以使用jQuery.post（）。您需要传递适当的URL和数据。作为回报，您将获得JSON数据。在jQuery.post/$.post的成功回调方法中，您可以在右侧创建一个div并显示这些数据。

如果要以json格式返回数据，也可以使用$ .postJSON（）

请确保在PHP Web服务中设置适当的标头。这两个可能是最重要的

Content-Type: application/json // if you are gonna return the data in JSON format
Access-Control-Allow-Origin: * // to let the browser pass the data to the DOM model. This is to allow CORS (Cross Origin Resouce Sharing)

<强>示例：

使用example.php

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');
if (isset($_POST['patientID'])) {

    $patientID = $_POST['patientID'];
    $data = array();

    // Enter the appropriate details below
    $mysqli = new mysqli("host", "username", "password", "db_name");

    /* check connection */
    if ($mysqli->connect_errno > 0) {
        die('Unable to connect to database [' . $mysqli->connect_error . ']');
    }

    $statement = $mysqli->prepare("SELECT * FROM `patients` WHERE `patientID` = ? LIMIT 1");
    $statement->bind_param('i', $patientID);
    $statement->execute();

    // You need to write a variable for each field that you are fetching from the select statement in the correct order
    // For eg., if your select statement was like this:
    // SELECT name, COUNT(*) as count, id, email FROM patients
    // Your bind_result would look like this:
    // $statement->bind_result($name, $count, $id, $email);
    // PS: The variable name doesn't have to be the same as the column name
    $statement->bind_result($id, $name, $email, $phone);
    while ($statement->fetch()) {
        $data["id"] = $id;
        $data["name"] = $name;
        $data["email"] = $email;
        $data["phone"] = $phone;
    }
    $statement->free_result();

    echo json_encode($data);
}

example.html的

<a href="" id="123" onclick="return getPatientData(this);">Patient #123</a>

example.js

function getPatientData(element) {
    var patientID = $(element).attr("id");
    $.post("example.php", {"patientID": patientID}, function (data) {
        // display the data in appropriate div
    }, 'json');
    return false;
}

Answer 2

你应该在元素点击

上进行jquery ajax调用

        $('.patientClass').on('click', function() { 

           var patientid = $(this).attr('id');
           // attr('id') should be the patients id
           $.ajax({
                url: "getPatientDetailsURL.php",
                type: "post",
                data: {
                    id: patientid
                },
                    success: function(response) {
                      // create div with response details or append parsed json to existing div
                }
            });
        )}

在后端获取patiend id与（int）$ _ POST [＆＃39; id＆＃39;]

你也可以在后端设置页面，只响应这样的ajax调用：

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//code here
} else {
// not ajax call
}

从表行到详细信息的AJAX请求

2 个答案: