时间戳

首页 > 解决方案 > 使用 AJAX 获取数据并将其保存为变量

ajax - 使用 AJAX 获取数据并将其保存为变量

问题描述

我对 AJAX 完全陌生，我似乎不知道搜索我正在寻找的内容的最佳方法。所以想在这里解释一下。我有一张列出我的用户的表格。我希望能够在不刷新的情况下编辑表格的任何行。因此，我为每一行添加了一个按钮，通过单击您可以在 Bootstrap 模式的帮助下编辑该用户。

有这个按钮可以启动操作：

<span class="updateInfo" user-id="<?php echo $users_array['id']; ?>" data-target=".editInfo" data-toggle="modal"><i class="fa fa-pencil" ></i></span>

$users_array是之前从数据库中的表中获取的数组。该表还具有“id、name、email、phone”作为列。

所以，我的 JS 代码中基本上是这样的：

jQuery(document).ready(function() {

    $('.updateInfo').click(function(){
        var userID = $(this).attr('user-id');
        $.ajax({
            url: "edit.php",
            method: "POST",
            dataType: 'json',
            data: {
                selected_user_id: userID,
            },
            success: function(data) {
                // I don't know what to do here :(
            }
        });
    });

});

edit.php文件中包含的代码如下：

$user_id=$_POST['selected_user_id'];

$get_user=mysql_query("SELECT * FROM users WHERE id='$user_id'");
$user_array=mysql_fetch_row($get_user);

echo json_encode($user_array);

我没有放建立数据库连接之类的代码，因为它们是基础并且可以正常工作。

我这里有几个问题：

  1. 我不知道到目前为止我编写代码的方式是否正确。
  2. 我应该如何获得这些结果并将它们保存为变量以供以后使用。
  3. 我不知道是否可以将新创建​​的变量用作原始文件中存在的模式中的占位符或预定义值。

PS：模式有一个简单的表单，只需输入姓名、电子邮件和电话号码：

<div class="modal fade editInfo" tabindex="-1" role="dialog" aria-labelledby="myNote" data-backdrop="static" aria-hidden="true">
<form method="POST">
    <input name="fullname" value="" />
    <input name="email" value="" />
    <input name="phone" value="" />
</form>
</div>

标签： ajaxvariables

解决方案

  • 为每个 html 元素设置 ID 

jQuery(document).ready(function() {    

 $("#fullname").val("USer One ");
               $("#email").val("User@gmail.com");
               $("#phone").val("987654");
               
               
               
     $('.updateInfo').click(function(){
            var userID = $(this).attr('user-id');
            $.ajax({
                url: "edit.php",
                method: "POST",
                dataType: 'json',
                data: {
                    selected_user_id: userID,
                },
                success: function(data) {
                     console.log(data);
               $("#fullname").val(data.fullname);
               $("#email").val(data.email);
               $("#phone").val(data.phone);
                }
            });
        });        
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="modal fade editInfo" tabindex="-1" role="dialog" aria-abelledby="myNote" data-backdrop="static" aria-hidden="true">
  <form method="POST"> <input id="fullname" name="fullname" value="" /><input id="email" name="email" value="" /> <input id="phone" name="phone" value="" /> </form>
</div>

然后像这样绑定：

推荐阅读