选择下拉列表时,Jquery / AJAX填充HTML表单

时间:2014-10-17 07:07:53

标签: javascript php jquery mysql ajax

我正在尝试在页面上填充表单。使用下拉选项的ID作为SQL语句中的ID,从MySQL数据库中提取填充表单所需的信息。我想我可以将信息存储在$ _SESSION [' formBookings']中,并在刷新时填充表单(这已经发生了,因为我在提交后使用会话变量填充表单

我不能在表单上附上一个提交按钮,因为我已经有一个,老板不想要另一个。我希望表单最终在选择选项时自动刷新页面。如果SQL语句中的数据已存储在会话数组中,则将填充表单。

这是我到目前为止所做的:

JQuery:

<script>
$(document).ready(function(){
    $('select[name=recall]').on('change', function() {var recall = $(this).val() 
    //$(function () 
      //{
        //-----------------------------------------------------------------------
        // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
        //-----------------------------------------------------------------------
        $.ajax({                                      
          url: 'recall.php',                  //the script to call to get data          
          data: "recall: recall",             //you can insert url argumnets here to pass to api.php
                                           //for example "id=5&parent=6"
          dataType: 'json',                //data format      
          success: function(data)          //on recieve of reply
          {
            var id = data[0];              //get id
            var vname = data[1];           //get name
            //--------------------------------------------------------------------
            // 3) Update html content
            //--------------------------------------------------------------------
            $('div#box1').load('DFBristol.html');//html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html
            //recommend reading up on jquery selectors they are awesome 
            // http://api.jquery.com/category/selectors/
          //} 
          });
        });
      });
    });
</script>

HTML:

<select name='recall' id='recall'>
                    <option selected></option>
                        <?php
                            session_start();
                            $user = 'root';
                            $pass = '';

                            $DBH = new PDO('mysql:host=localhost;dbname=nightlineDB;', $user, $pass);
                            $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                            $DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

                            $recall = $DBH->prepare('SELECT * FROM bookings WHERE dateInputted >= now() - INTERVAL 2 DAY');
                            $recall->execute();
                            $recallResult = $recall->fetchALL(PDO::FETCH_ASSOC);

                            foreach ($recallResult as $key) {
                                echo '<option id='.$key["ID"].'>'.$key['ID'].' - '.$key['branch'].' - '.$key['title'].' '.$key['firstName'].' '.$key['lastName'].'</option>';
                            }
                        ?>
                    </select><br />

SQL文件(recall.php):

<?php
$user = 'root';
$pass = '';

$DBH = new PDO('mysql:host=localhost;dbname=nightlineDB;', $user, $pass);
$DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

$recall = $DBH->prepare("SELECT * FROM bookings WHERE ID = '%$recall%'");
$recall->execute();
$recallFormResult = $recall->fetchALL(PDO::FETCH_ASSOC);

echo json_encode($recallFormResult);

&GT;

我试图传递变量&#39;召回&#39;从jquery到使用data参数的SQL语句但没有任何反应。

有人可以帮助我理解我做错了什么以及如何解决它。

1 个答案:

答案 0 :(得分:2)

快速浏览一下,到目前为止您发布的代码似乎存在两个问题:

AJAX请求

即使$.ajax() defaults to a request type of GET by default,指定它也很不错。您的请求中也存在语法错误 - 您已使用success关闭了});回调,其中}仅为$.ajax({ url: "recall.php", data: { recall: recall }, type: "GET", // Declare type of request (we use GET, the default) dataType: "json", success: function(data) { var id = data[0]; var vname = data[1]; $('div#box1').load('DFBristol.html'); } // The problematic closure });

jqXHR.success()

更好:不使用弃用的.done()函数,而是使用$.ajax({ url: "recall.php", data: { recall: recall }, type: "GET", // Declare type of request (we use GET, the default) dataType: "json" }).done(function() { // Success var id = data[0], vname = data[1]; $('div#box1').load('DFBristol.html'); }); promise对象,即:

recall.php

修复文件recall.php

当您向$_GET[]发出AJAX GET请求时,该文件需要知道您打算传递哪些变量,而这些变量尚未定义。你可以使用<?php // Assign the variable $recall with the value of the recall query string from AJAX get request // I recommend doing a check to see if $_GET['recall'] is defined, e.g. // if($_GET['recall']) { $recall = $_GET['recall']; } $recall = $_GET['recall']; // The rest of your script, unmodified $user = 'root'; $pass = ''; $DBH = new PDO('mysql:host=localhost;dbname=nightlineDB;', $user, $pass); $DBH->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $DBH->setAttribute(PDO::ATTR_EMULATE_PREPARES, false); $recall = $DBH->prepare("SELECT * FROM bookings WHERE ID = '%$recall%'"); $recall->execute(); $recallFormResult = $recall->fetchALL(PDO::FETCH_ASSOC); echo json_encode($recallFormResult); ?> see doc),即:

来做到这一点
$_POST[]

注意:但是,如果您选择发出POST请求,则应使用{{1}}(see doc)代替:)