使用Jquery / Ajax并将POST响应文本写入div层

时间:2012-10-11 12:51:24

标签: php jquery ajax dynamic

我不是jquery专家,在过去的6个小时里,我一直试图让它发挥作用。

我需要通过ajax发送2个单选按钮组和1个复选框,以从我的php页面获取html响应。

我已经通过添加表单/按钮并实际发布表单数据来验证处理php页面是否正常工作,但我希望能够即时获取它并将其粘贴在响应div中。

感谢您提供的任何帮助。

HTML:

<div class="formtaglong">
             <input type="radio" value="both" name="buildings" class="small_radio" checked > <span class="checkboxText">Both</span> 
             <input type="radio" value="thunder" name="buildings" class="small_radio" > <span class="checkboxText">Thunderhawk</span> 
             <input type="radio" value="center" name="buildings" class="small_radio" > <span class="checkboxText">Center Drive</span> 
             </div>

 <div class="formtaglong" id="checkall">
              <input type="checkbox" value="All" id="sa" name="sa" class="small_radio" > <span class="checkboxText">All</span>
             <?php
             while($row = mysql_fetch_array($query)){
                 echo '<input type="checkbox" value="'.$row['operator'].'" name="users[]" class="small_radio"> <span class="checkboxText">' .$row['operator'] . '</span> ';
             }
             ?>
             </div>
<div class="formtaglong">
             <input type="radio" id="alltime" value="alltime" name="daterange" class="small_radio" checked ><span class="checkboxText">All</span>
             <input type="radio" id="today" value="today" name="daterange" class="small_radio" > <span class="checkboxText">Today</span>
             <input type="radio" id="yesterday" value="yesterday" name="daterange" class="small_radio" > <span class="checkboxText">Yesterday</span>
             <input type="radio" id="threedays" value="threedays" name="daterange" class="small_radio" > <span class="checkboxText">3 Days</span>
             <input type="radio" id="thisweek" value="thisweek" name="daterange" class="small_radio" > <span class="checkboxText">This Week</span>
             <input type="radio" id="thismonth" value="thismonth" name="daterange" class="small_radio" > <span class="checkboxText">This Month</span>
             <input type="Submit" name="print" id="print" value="Submit" class="button">
             </div>

 <div id="results" class="shadeGood" style="max-height:620px; width:778px; overflow:auto; float:left;">
<!-- I SHOULD HOLD RESPONSE DATA -->
             </div>

这是我到目前为止的jquery函数

<script>
                    $(document).ready(function(){
                    $("#main").click(function() {

                    //check radio buildings for selected value
                    var radBuild = $('input:radio[name=buildings]:checked').val();

                    //check radio daterange for selected value
                    var radDate = $('input:radio[name=daterange]:checked').val();

                    //create array for multiple possibilites from checkbox users
                    var chkUsers = [];
                    //loop through checkboxes appending values to array
                    $('#checkall :checked').each(function() {
                       chkUsers.push($(this).val());
                     });

                     //send the request
                    $.ajax({
                        url: "/pick-print-results.php",
                        type: "post",
                        data: "buildings=" + radBuild + "&daterange=" + radDate + "&users[]=" + chkUsers,
                        // callback for success
                        success: function(data){
                        $("results").html(data); 
                        } //ends sucess callback function
                    }); //ends .ajax function
                 }); //end #checkall.click function
              }); // ends ready function
                    </script>

我应该注意到目前所有输入div层都嵌套在div id #main中,而我只是使用click函数进行测试。

编辑: 按请求添加php处理文件:... 注意..我没有打扰消毒结果,因为这个网页只会在网络内部使用。

<?php
//Break up Refer on forward slash /
$refer =explode('/',$_SERVER['HTTP_REFERER']);

//IF Request Page not print-picks.php page then bounce them there...
if (end($refer)!='print-picks.php') {
      $host  = $_SERVER['HTTP_HOST'];
      $uri  = rtrim(dirname($_SERVER['PHP_SELF']), '/\\');
      $extra = 'print-picks.php';
      header("Location: http://$host$uri/$extra");
      exit();
}
include 'connect_to_db.php';
require_once ('doctype.php'); 

if(isset($_POST['daterange'])){ $daterange = $_POST['daterange']; }else{$daternage='';}
if(isset($_POST['users'])) { $users=$_POST['users']; }else{ $users='';}
if(isset($_POST['buildings'])){ $buildings=$_POST['buildings']; }else{$buildings='';}

//Build Daterange AND statment for query
switch ($daterange) {
    case "alltime":
    $query_chunk_2='';
    break;
    case "today":
    $query_chunk_2= 'AND pi.date_requested >= \'' . date('Y-m-d') . '\'';
    break;
    case "yesterday":
    $query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-1 days')) . '\'';
    break;
    case "threedays":
    $query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-3 days')) . '\'';
    break;
    case "thisweek":
    $query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-7 days')) . '\'';
    break;
    case "thismonth":
    $query_chunk_2='AND pi.date_requested >= \'' . date('Y-m-d',strtotime('-30 days')) . '\'';
    break;
    default:
    $query_date='';
}

//Build Building AND Statment for query
switch ($buildings) {
    case "both":
    $query_chunk_3='';
    break;
    case "center":
    $query_chunk_3='AND l.building LIKE \'%Center%\'';
    break;
    case "thunder":
    $query_chunk_3='AND l.building LIKE \'%Thunder%\'';
    break;
    default:
    $query_chunk_3='';
}

//check if users is array
if(is_array($users)) {
//Deal With User Array
 //IF ALL IS SET..... GET ALL USERS IGNORE OTHER SELECTIONS
if($_POST['users'][0]=='All') {
    $query_chunk_4="AND  o.operator NOT LIKE ' '";
} else {
    //ELSE WE LOOP THROUGH EACH VALUE AND BUILD THE QUERY STATEMENT

    //Chunk 4 segment 1
    $query_chunk_4 ="AND o.operator IN(";

    //Get Total Array Values To Properly Add Commas to the String
    $i=0; // zero start value counter
    $ar_count=count($_POST['users']); //total elments in array
        foreach($_POST['users'] as $k=>$c)
        {
            $query_chunk_4.="'".$c."'";
            if($i!=$ar_count && $i!=($ar_count-1)){
                $query_chunk_4.=",";
            }
            $i++;
        }
        //Chunk 4 last segment
        $query_chunk_4 .=")";
}
}else { //USERS IS NOT AN ARRAY
$query_chunk_4="AND  o.operator NOT LIKE ' '";
}

//STATIC BEGINING OF QUERY
$query_chunk_1="SELECT pi . * , p.part_number, o.description, l.location, r.received_date
FROM picks AS pi
INNER JOIN parts AS p ON p.part_id = pi.part_id
INNER JOIN operators AS o ON o.operator_id = pi.operator_id
INNER JOIN locations AS l ON l.location_id = pi.location_id
INNER JOIN received AS r ON r.received_id = pi.received_id
WHERE pi.action_id = '11'";

//STATIC END OF QUERY
$query_chunk_last="ORDER BY pi.date_requested ASC";

//MERGE QUERY
$big_chunk_sql=$query_chunk_1 . ' ' . $query_chunk_2 . ' ' . $query_chunk_3 . ' ' . $query_chunk_4 . ' ' . $query_chunk_last;
$big_chunk_query=mysql_query($big_chunk_sql) or die(mysql_error());
//echo "<br> Big Chunk  = ".$big_chunk_sql;

        $i='';
        echo  '<table border="1px" style="width: 761px;" cellspadding="0" cellspacing="0">';
        while($data=mysql_fetch_array($big_chunk_query)) {
           if ($i%2 !=0)
             $rowColor = 'tr1center';
              else
             $rowColor = 'tr2center';
                $pendingdate= trim($data['received_date']);
                $newpendingdate = date('m-d-Y',strtotime($pendingdate));
                echo '<tr class="'.$rowColor.'"><td>'.$data['part_number'] . '</td><td>'.date("m-j-y, g:i a", strtotime($data['date_requested'])) .'</td><td>'
                .$data['description'].'</td><td>'. $data['qty_requested'] . '</td><td>'. $data['location'].'</td><td>'. $newpendingdate . '</td><td> 
                <a href="picking.php?radiopart='.urlencode($data['org_transaction_id']) .'">Mark Picked</a></td></tr>';
                if($data['notes_to_picker']!='') { 
                echo '<tr class="'.$rowColor.'" align="center"><td colspan="2">&nbsp;</td><td align="right"><b>notes:</b></td><td colspan="4">' . $data['notes_to_picker'].'</td></tr>';
                }
                $i++;
            }
            echo '</table></div>';
?>
编辑#2。编辑#2 我向我的成功函数添加了一个警报(数据),然后我回到了看似有效的结果,但是此时它似乎不会被写入结果div层。 这是我从警报中看到的结果弹出窗口。

<table border="1px" style="width: 761px;" cellspadding="0" cellspacing="0"><tr class="tr2center"><td>AS001-70S</td><td>10-9-12, 9:42 am</td><td>Don Ford </td><td>500</td><td>LOAD</td><td>09-28-2010</td><td> 

                <a href="picking.php?radiopart=1005">Mark Picked</a></td></tr><tr class="tr1center"><td>H-016-V75</td><td>10-9-12, 11:28 am</td><td>Don Ford </td><td>80</td><td>LOAD</td><td>09-05-2012</td><td> 

                <a href="picking.php?radiopart=4503">Mark Picked</a></td></tr></table>

1 个答案:

答案 0 :(得分:0)

好吧,您可以尝试将所有内容(html)放在表单中,然后使用$('form')发送所有内容.serialize()

在您的成功方法console.log(数据)或警报(数据)中查看您获得的内容

使用

这取决于您是否只想检索值或值数组,在这种情况下只需发送回json对象。

在浏览器中打开java控制台,看看是否收到错误消息。它会更容易。

并在您的ajax方法中使用:  data:{“postvar”:$('some')。val(),“other”:'val'},

这是一个快速回答;)