从表行到详细信息的AJAX请求 [英] AJAX Request from Table Rows to Details

问题描述

这是我第一次来这儿，所以如果我不能与大家一起sn鼻涕，对不起.

This is my first time on here so I'm sorry if I'm not quite up to snuff with all of you.

在学习AJAX的过程中，我是新手，但需要完成我们员工网站的页面.

In the process of learning AJAX so I'm brand new, but need to get a page done for our staff website.

我有一个页面(php)，该页面通过mysql查询所有患者建立一个列表.我对此绝对没有问题.但是，我被困在这部分上.

I have a page (php) which builds a list through a mysql query of all patients. I have absolutely no problem with this. However, I'm stuck on this part.

当用户单击特定的行(又名患者姓名")时，我希望它在右侧的mysql数据库中上拉与该患者相关联的该患者的详细信息，因此该页面不必刷新和它们不会定向到任何其他页面.

When a user clicks a specific row (aka Patient Name), I want it to pull up the details of that patient associated with it in our mysql database on the right-hand side so the page doesn't have to refresh and they aren't directed to any other pages.

当涉及到客户时，我已经看到了这样的示例，例如单击名称，然后在右侧显示一个div，其中包含电子邮件，电话等.

I have seen examples like this when it came to customers, like you click the name and a div appears to the right containing email, phone, etc. etc.

有人有什么好的出发点吗?我已进行了尽可能的搜索，并且开始认为搜索答案时使用的语言不正确.

Does anyone have any good starting points? I have searched as far as I can, and I'm beginning to think I'm not using the right language when searching for my answer.

提前谢谢...马特

推荐答案

使用jQuery. 首先，您需要在服务器上制作一个Web服务. Web服务将接受一个POST参数，该参数可以是患者姓名或患者ID.根据此ID/名称，您将查询MySQL数据库，获取所有详细信息并以json格式返回.

Use jQuery. First you need to make a web service on your server. The web service will accept a, let's say, POST parameter which will be either patient name or the patient ID. Based on this id/name you will query your MySQL database, fetch all the details and return as json.

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

On the front end, you can use jQuery.post(). You will need to pass the appropriate URL and the data. In return, you will get JSON data. In the success callback method of jQuery.post/$.post you can create a div on the right and display those data.

如果您要以json格式返回数据，则也可以只使用$ .postJSON()

If you are going to return the data in json format, you can also just use $.postJSON()

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

Please make sure to set the appropriate headers in your PHP webservice. These two are probably the most important

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

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

example.html

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

example.js

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

这篇关于从表行到详细信息的AJAX请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！