我不是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"> </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>
答案 0 :(得分:0)
好吧,您可以尝试将所有内容(html)放在表单中,然后使用$('form')发送所有内容.serialize()
在您的成功方法console.log(数据)或警报(数据)中查看您获得的内容
使用
这取决于您是否只想检索值或值数组,在这种情况下只需发送回json对象。
在浏览器中打开java控制台,看看是否收到错误消息。它会更容易。
并在您的ajax方法中使用: data:{“postvar”:$('some')。val(),“other”:'val'},
这是一个快速回答;)