我正试图根据div/表单的输入值显示php文件的结果。
我有以下JavaScript：
<script>
$(document).ready(function(){
$('#ranksubmit').click(function() {
$.ajax({
type: "post",
url: "queryrankings.php",
data: $("#query-form").serialize(),
success: function(result){
$(".results-table").html(result);
}
});
//return false;
});
});
</script>
它应该将这个div的值传递给php脚本queryrankings.php:
<div class="form-horizontal" id="query-form" >
<fieldset>
<!-- Form Name -->
<legend class = "text-center">Query Rankings<hr></legend>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="ranktype">Ranking Type:</label>
<div class="col-md-4">
<label class="radio-inline" for="ranktype-0">
<input type="radio" name="ranktype" id="ranktype-0" value="1" checked="checked">
Author
</label>
<label class="radio-inline" for="ranktype-1">
<input type="radio" name="ranktype" id="ranktype-1" value="2">
University
</label>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="startyear">From:(ie. 2010)</label>
<div class="col-md-4">
<select id="startyear" name="startyear" class="form-control">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="endingyear">To:(ie. 2015)</label>
<div class="col-md-4">
<select id="endingyear" name="endingyear" class="form-control">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
</select>
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="journalselection">Journal Selection:</label>
<div class="col-md-4">
<label class="radio-inline" for="journalselection-0">
<input type="radio" name="journalselection" id="journalselection-0" value="all" checked="checked" onclick="CheckBoxes(1)" >
All Journals
</label>
<label class="radio-inline" for="journalselection-1">
<input type="radio" name="journalselection" id="journalselection-1" value="basket" onclick="CheckBoxes(2)">
AIS Basket of Journals
</label>
<label class="radio-inline" for="journalselection-2">
<input type="radio" name="journalselection" id="journalselection-2" value="top2" onclick="CheckBoxes(3)">
Top 2 Journals
</label>
<label class="radio-inline" for="journalselection-3">
<input type="radio" name="journalselection" id="journalselection-3" value="custom" onclick="CheckBoxes(4)">
Custom Selection
</label>
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="journals">Journals:</label>
<div class="col-md-4">
<label class="checkbox-inline" for="journals-0">
<input type="checkbox" name="journals" id="journals-0" value="misq" checked onclick="CustomSelection()">
MISQ
</label>
<label class="checkbox-inline" for="journals-1">
<input type="checkbox" name="journals" id="journals-1" value="isr" checked onclick="CustomSelection()">
ISR
</label>
<label class="checkbox-inline" for="journals-2">
<input type="checkbox" name="journals" id="journals-2" value="jmis" checked onclick="CustomSelection()">
JMIS
</label>
<label class="checkbox-inline" for="journals-3">
<input type="checkbox" name="journals" id="journals-3" value="jais" checked onclick="CustomSelection()">
JAIS
</label>
<label class="checkbox-inline" for="journals-4">
<input type="checkbox" name="journals" id="journals-4" value="ejis" checked onclick="CustomSelection()">
EJIS
</label>
<label class="checkbox-inline" for="journals-5">
<input type="checkbox" name="journals" id="journals-5" value="isj" checked onclick="CustomSelection()">
ISJ
</label>
<label class="checkbox-inline" for="journals-6">
<input type="checkbox" name="journals" id="journals-6" value="jsis" checked onclick="CustomSelection()">
JSIS
</label>
<label class="checkbox-inline" for="journals-7">
<input type="checkbox" name="journals" id="journals-7" value="jit" checked onclick="CustomSelection()">
JIT
</label>
<label class="checkbox-inline" for="journals-8">
<input type="checkbox" name="journals" id="journals-8" value="dss" checked onclick="CustomSelection()">
DSS
</label>
<label class="checkbox-inline" for="journals-9">
<input type="checkbox" name="journals" id="journals-9" value="iandm" checked onclick="CustomSelection()">
I&M
</label>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">COMING SOON! Category:</label>
<div class="col-md-4">
<select disabled id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Region, NCAA Conference, & More!</option>
<option value="2">N/A</option>
</select>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="ranksubmit"></label>
<div class="col-md-4">
<button id="ranksubmit" class="btn btn-default-border wow tada">Submit</button>
</div>
</div>
</fieldset>
</div>
当我尝试$_POST php脚本中的值时，它不起作用。它不应该读取这个div中的值吗？
这是php。它将返回一个常规的打印语句，但它不会打印我认为发布的变量，因为它在中没有读取任何内容
<?php
$dbHost = "localhost";
$dbUsername = "user_rw";
$dbPassword = "";
$dbName = "webdb";
// Create connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
} else {
$type = $_POST['ranktype'];
print $type;
}
?>我使用<div>而不是<form>，因为我不希望在单击提交按钮时重新加载页面。
<div class="form-horizontal" id="query-form" > ...</div>
应为form tag
<form class="form-horizontal" id="query-form" > .... </form>
已更新
$('#ranksubmit').click(function(e) {
e.preventDefault()
// the rest of the code
});
使用<input type="button"/>、e.preventDefault()或return false来阻止表单提交。