Javascript 如何在ajax php中获取标题图像和内容的值

如何显示数据标题、图像和内容

代码如下：

view.php

index.php

我想做的是得到标题、图片和内容。 如何获得标题、图像和内容的价值

如何从php中调用“标题”、“名称”和“内容”

---

console.log（'DATA:'+DATA）
无需使用while循环获得结果。同时删除额外的
$dataArr
和
$responseArr

将代码更新为：

in view.php

$id = $_REQUEST['edit_literature_id'];
    $literature = $_REQUEST['literatureID'];
    $module = $_REQUEST['edit_moduleId'];

    if (isset($id)) {
      $sql = "SELECT * FROM $literature WHERE `id`='".$id."'";
      if ($result = mysqli_query($conn, $sql)) {
         if (mysqli_num_rows($result) > 0) {
            $row = mysqli_fetch_array($result);
            $data['title'] = $row['title'];
            $data['name'] = 'data:image/jpeg;base64,' . base64_encode($row['name']);
            $data['content'] = $row['content'];
            echo  json_encode($data); exit;
            }
            mysqli_free_result($result);
        }
    }
      $data['error'] = "No Record";
      echo  json_encode($data); exit;

Index.php

$(document).ready(function () {
            $(document).on('click', '#btnModalUpdate', function (e) {
                e.preventDefault();
                rowId = $(this).attr('data-id');
                moduleData = $(this).attr('data-module');
                literatureData = $(this).attr('data-literature');
                $('#edit_id').val(rowId);
                $('#edit_module').val(moduleData);
                $('#edit_literature').val(literatureData);
                $('#edit_imageId').val(rowId);
                $('#update').val('update');
                $.ajax({
                    type: 'POST',
                    url: '../../crud/read/view.php',
                    data: $('#modalFormUpdate').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        var response = jQuery.parseJSON(data);
                        var title = response.title;
                        var name = response.name;
                        var content = response.content;

                         alert(title);
                         alert(name);
                         alert(content);
                    }
                });
            });
});

从jQuery端获取数据后，您可以使用jQuery中的id或class属性在html端设置值。
ajax receiving.php文件的外观：

重要做法：


验证用户输入，以便只有符合条件的提交才具有访问数据库的权限
在整个项目中，始终将失败结果写在成功结果之前，这将使脚本更易于阅读/遵循
始终使用准备好的语句，并将用户提供的数据绑定到占位符，以确保查询的稳定性/安全性
tablename不能像
id
值那样绑定；它必须直接写入sql字符串中——这就是为什么根据白名单ID数组验证该值至关重要的原因
无需声明新变量来接收
$\u GET
值；只需直接从超全局数组访问值
我将假设您的
id
是表中的主键/唯一键，因此您不需要在结果集中循环。尝试获取一行--它将包含数据或结果集为空
只在脚本末尾调用一次json_encode（）

清除任何结果或关闭准备好的语句或连接都是不值得的，因为不管怎样，这些任务都是在脚本执行完成时自动完成的——避免脚本膨胀

至于jquery脚本：

$(document).ready(function () {
    $(document).on('click', '#btnModalUpdate', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'GET',
            url: '../../crud/read/view.php',
            data: $('#modalFormUpdate').serialize(),
            dataType: 'json',
            success: function (response) {
                if (response.hasOwnProperty('error')) {
                   console.log(response.error);
                } else {
                   console.log(response.title, response.name, response.content);
                }
            }
        });
    });
});

• 我把所有不相关的行都删掉了
• 将POST更改为GET——因为您只是从数据库中读取数据，而不是写入

• parseJSON（）

  不是必需的--

  response

  是一个随时可用的对象
• 我正在检查响应对象中的

  error

  属性，以便访问适当的数据

---

以上两个脚本都未经测试（完全是从我的手机中编写的）。如果我有任何输入错误，请给我留言，我会改正的。

数据未定义，名称和内容值未定义请不要建议SQL注入易受攻击的代码。@Dharman我没有进行SQL查询，我只是用fix更新了iverson的代码，问题不在于SQL注入预防。他应该自己做这件事不，您应该修复所有有关代码的问题。您的数据是json格式的，它是一个数组。因此，执行

console.log（数据[0].title）

应该为您提供标题？您的代码易受SQL注入攻击。你应该使用事先准备好的陈述。

$(document).ready(function () {
            $(document).on('click', '#btnModalUpdate', function (e) {
                e.preventDefault();
                rowId = $(this).attr('data-id');
                moduleData = $(this).attr('data-module');
                literatureData = $(this).attr('data-literature');
                $('#edit_id').val(rowId);
                $('#edit_module').val(moduleData);
                $('#edit_literature').val(literatureData);
                $('#edit_imageId').val(rowId);
                $('#update').val('update');
                $.ajax({
                    type: 'POST',
                    url: '../../crud/read/view.php',
                    data: $('#modalFormUpdate').serialize(),
                    dataType: 'json',
                    success: function (data) {
                        var response = jQuery.parseJSON(data);
                        var title = response.title;
                        var name = response.name;
                        var content = response.content;

                         alert(title);
                         alert(name);
                         alert(content);
                    }
                });
            });
});

$validLiteratureIds = ['yourTable1', 'yourTable2']; 
if (!isset($_GET['edit_literature_id'], $_GET['literatureID']) || !in_array($_GET['literatureID'], $validLiteratureIds)) {
    $response = ['error' => 'Missing/Invalid Data Submitted'];
} else {
    $conn = new mysqli('localhost', 'root', '', 'dbname');
    $sql = "SELECT title, name, content
            FROM `{$_GET['literatureID']}`
            WHERE `id` = ?";
    $stmt = $conn->prepare($sql);
    $stmt->bind_param("s", $_GET['edit_literature_id']);
    $stmt->execute();
    $stmt->bind_result($title, $name, $content);
    if (!$stmt->fetch()) {
        $response = ['error' => 'No Record'];
    } else {
        $response = [
            'title'=> $title,
            'name' => 'data:image/jpeg;base64,' . base64_encode($name),
            'content' => $content
        ];
    }
}
echo json_encode($response);

$(document).ready(function () {
    $(document).on('click', '#btnModalUpdate', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'GET',
            url: '../../crud/read/view.php',
            data: $('#modalFormUpdate').serialize(),
            dataType: 'json',
            success: function (response) {
                if (response.hasOwnProperty('error')) {
                   console.log(response.error);
                } else {
                   console.log(response.title, response.name, response.content);
                }
            }
        });
    });
});