【问题标题】:Searching for users and populating a form with AJAX and Jquery搜索用户并使用 AJAX 和 Jquery 填充表单
【发布时间】:2016-02-10 14:08:26
【问题描述】:

我希望使用以前的注册人数据填充注册表。 目前,我使用 Ajax、Jquery 和 PHP(来自 MySQL 数据库)创建了一个搜索字段,您可以在其中开始输入姓氏,然后出现一个显示姓名和生日的按钮列表。

我想要它,以便您单击正确的名称并填充表单字段。

我正在寻找有关我是否应该让按钮(单击时)对 PHP 搜索文件进行新的 Ajax 调用、传递该注册人的 ID 的建议,或者是否应该简单地存储我需要的所有数据第一个 Ajax 调用,然后在单击按钮时将该信息传递给我的表单字段。

以一种方式或另一种方式这样做有优势吗?

如果搜索中出现一千个名字,存储所有数据需要一段时间,但如果只是少数返回的名字,那会不会很重要?

此外,我可以清楚地知道如何使第二次 Ajax 搜索工作,但我不清楚如果我在第一次调用时存储信息的最佳方式。 (存储在一个数组中?可以直接解析 JSON 数据吗?如果是这样,我无法想象“如果它会存在”,而一个按钮正在等待被点击。

这是我当前生成按钮的代码(大部分来自互联网):

<script type="text/javascript">//
  $("#searchbox").keyup(function(e){
    var q = "data=" + $("#searchbox").val();
    var sLength = q.length;
    if (sLength > 7){
    $.ajax({
        dataType: "json",
        url: "autoLookup.php?" + q,
        success:
    function(data) {
      $("#searchResult").empty();
      $("#searchButtonHeader").empty();
      $("#searchButtonHeader").append("Results for <b>" + q + "</b>");

      $.each(data, function(i,item){
        $("#searchResult").append("<button type='button' class='btn btn-primary regName' name='" + item.uId + "'>" + item.firstname + " " + item.lastname + " (" + item.city + ", " + item.state + " " + item.dobf + ") </button>");
        //storeVals
        qArray = 

      });
    }
  })
}//if
else {
    $("#searchResult").empty();
    }

});

感谢您的意见!!!

J

添加此信息:

您好 Jakub,感谢您的帮助...这是我的“autolookup.php”文件:

$key = $_GET['data'];
    $return_arr = array();

    //search older roster for runner data
    $query =("SELECT * FROM roster2015done WHERE lastname LIKE '{$key}%' ORDER BY lastname, firstname, dob");

    //echo $query . "<br><br>";
    if ($key != "") {
        $result = SQL($query);
        while($row = mysql_fetch_assoc($result))
        {
          $array['uId'] = $row['Id'];
          $array['firstname'] = $row['firstname'];
          $array['lastname'] = $row['lastname'];
          $array['city'] = $row['city'] ;
          $array['state'] = $row['state'];
          $array['dob'] = $row['dob'];
          $array['dobf'] = date("m-d-Y", strtotime($row['dob'])); //dob formatted for diaplay
          $array['addr1'] = $row['addr1'];
          $array['addr2'] = $row['addr2'];
          $array['email'] = $row['email'] ;
          $array['phone'] = $row['phone'];

        array_push($return_arr, $array);
        }
        echo json_encode($return_arr);
    }else{
        $return_arr = "";
        echo json_encode($return_arr); //send empty array if search box is emptied. (belt and suspenders: js is doing this already)
        }

如您所见,我让 PHP 从数据库中提取我想要的数据并将其添加到数组中,然后进行 JSON 编码。因此,当我的“按钮”在我的 html 页面上重新创建时,虽然我只显示名字、姓氏、城市和 dob,但实际上我带来了我最终想要填充表单的其他字段(我已经添加了这个 - 然后提出了我的问题,这是否是一个好主意)。

我不确定的是,假设我返回 10 个结果。我正在显示 10 个按钮(每次迭代“项目”时,它都会创建按钮),但是如果我希望能够单击正确的按钮并让该人的信息填充表单,那么数据是否仍然可用被“搜索”和使用?如果是这样,它在哪里? JSON 数组(或对象 - 不确定它的正确术语)是否仍然“可用”以进行搜索/解析?或者我是否也应该将信息存储在一个新的多维数组或我可以访问的东西中? (我意识到如果我已经有一个可搜索的 JSON 对象,这似乎有点多余 - 但我有吗?)

谢谢,J

这里是我最终用来在按钮单击时填充表单的代码:

<script type="text/javascript">

变量数据;

  $("#searchbox").keyup(function(e){
    var q = "data=" + $("#searchbox").val();
    var sLength = q.length;
    if (sLength > 7){
    $.ajax({
        dataType: "json",
        url: "autoLookup.php?" + q,
        success:
    function(data) {
        var results = data; **//ADDED THIS BECUASE USING data var below didn't work.**
      $("#searchResult").empty();
      $("#searchButtonHeader").empty();
      $("#searchButtonHeader").append("Results for <b>" + q + "</b>");

      $.each(data, function(i,item){
        $("#searchResult").append("<button type='button' class='btn btn-primary regName' name='" + item.uId + "'>" + item.firstname + " " + item.lastname + " (" + item.city + ", " + item.state + " " + item.dobf + ") </button>");
      });

      **//HERE IS WHAT I ADDED TO POPULATE THE FORM**

        $("#searchResult").on('click', ".regName", function(data){
        //alert($(this).attr('name'));
        var userId = $(this).attr('name');
        $.each(results, function(i,item){
            //alert(item.uId + " : " + userId);
            if (item.uId == userId){
                //alert ("Name is: " + item.firstname + item.lastname);
                $("#lastname").val(item.lastname);
                $("#firstname").val(item.firstname);
                $("#addr1").val(item.addr1);
                $("#addr2").val(item.addr2);
                $("#city").val(item.city);
                $("#state").val(item.state);
                $("#zip").val(item.zip);
                $("#email").val(item.email);
                $("#phone").val(item.phone);
                $("#dob").val(item.dob);
                $("#gender").val(item.gender);
                $("#size").val(item.size);

                //remove buttons.
                $("#searchResult").empty();
                }
            });
        });

    }
  })

}//if
else {
    $("#searchResult").empty();
    }

});

【问题讨论】:

标签: jquery ajax forms autocomplete


【解决方案1】:

在服务器端 (PHP) 进行限制,例如到 10 个名字。如果有人输入 2 个字母,但看不到他的名字,他必须输入另一个字母 - 但通常这种解决方案是可以的。在 PHP 中返回一个 JSON 对象数组 - 所以在 JavaScript 中你可以看到返回的数据:

 data = [
     {
        firstname: "someName",
        lastname: "someLastName",
        city: "someCity",
        state: "someState",
        dobf: "someDobf"
     },
     {
        firstname: "someName2",
        lastname: "someLastName2",
        city: "someCity2",
        state: "someState2",
        dobf: "someDobf2"
     },
     {
        firstname: "someName10",
        lastname: "someLastName10",
        city: "someCity10",
        state: "someState10",
        dobf: "someDobf10"
     }];

你可以做一个onClick函数:

 $("#searchResult").append("<button type='button' onclick = 'fillForm(" + i + ");' class='btn btn-primary regName' name='" + item.uId + "'>" + item.firstname + " " + item.lastname + " (" + item.city + ", " + item.state + " " + item.dobf + ") </button>");

当用户点击他的名字时:

var fillForm = function(i){
   console.log(data[i]); //here you will have data for that user e.g.: data[i].firstname
   $('#yourFirstNameField').val(data[i].firstname); //fill your form
}

这个函数应该在data范围内。

还有两件事:

  1. 您的 php 代码容易受到 sql 注入的影响
  2. 如果#searchbox字段最好计算实际长度:

    var q = $("#searchbox").val();

    var sLength = q.length; if (sLength > 2){ }

你总是可以这样做的:url: "autoLookup.php?data=" + q

【讨论】:

  • 嗨,Jakub,谢谢。我将我的 PHP 添加到我原来的问题中。 (我对 JSON 很陌生——感谢您对我的支持)。啊,我没想到“数据”包含我的全部 php 输出。 (即 JSON 编码结果) - 信息在 var “data” 中是“活的” - 对吗?所以我只是尝试“document.write(data)”,我看到的只是“[object Object],[O ...”我是否必须使用类似这样的其他函数来搜索“data”? (也可以在网上找到):$.each(json.people.person, function(i, v) { if (v.name.search(new RegExp(/peter/i)) != -1) { alert(v.age); return;
  • 关于 SQL 注入的可能性,我通常将 htmlentities() 添加到我的 post/get 变量中以防万一。 - 我忘了这样做。
  • 关于 SQL 注入的可能性,我通常将 htmlentities() 添加到 post/get vars 以防万一——忘了这样做。如您所见,我在 JS 中进行 ajax 调用之前计算输入的字符 - 主要是为了避免在仅输入第一个字母后等待 100 个返回的结果(数据库中有几千个条目)。我也喜欢您将计数传递给我的 PHP 的想法。不知道为什么,但我不能直接在我的表单填写功能中使用“数据”,但我将它的值分配给新的 var“结果”,然后对其进行迭代以填写表单。请参阅我的帖子的更新。谢谢!
猜你喜欢
  • 1970-01-01
  • 2014-07-12
  • 2016-01-07
  • 1970-01-01
  • 2018-06-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-12
相关资源
最近更新 更多