在DIV使用Ajax提交表单，在股利无刷新返回PHP [英] Submit form in div with ajax, return php in div without refresh
问题描述
我有一个索引页，顶部有三个按钮。在每个按钮的点击一个PHP文件加载到主分区。其中的一个按钮加载用户填写并提交表单。在窗体的提交我需要它不刷新页面，所得到的数据加载到一个div窗体页...不是主分区。
如果我加载窗体页上它自己的（即不是通过点击按钮，只是打字的形式本身的地址）...一切工作正常。表单验证工作，并将其提交不刷新，所得数据返回到窗体的结果DIV。
不过，我加载索引页，点击按钮加载形式。形式加载正确的，但是当我点击提交，它只是刷新页面......这将导致自成其加载原本隐藏股利的形式消失。此外，形式不验证，不执行PHP操作。
再次的形式和它自己的副PHP的正常工作。该问题仅出现在当我加载索引页的形式。所以我假设这个问题是与我加载到索引页面上一个div。任何帮助将大大AP preciated。
指数code：
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =头＆GT;
＆LT;中心＆GT;＆LT; H2＆GT; OMS辅导数据库＆LT; / H＆GT;＆LT; /中心＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =导航栏＆GT;
＆LT;中心＆GT;
＆LT;按钮类=navbuttonID =buttonview类型=按钮＆gt;查看辅导列表＆LT; /按钮＆GT;
＆LT;按钮类=navbuttonID =buttonadd类型=按钮＆gt;添加学生和LT; /按钮＆GT;
＆LT;按钮类=navbuttonID =buttonadmin类型=按钮＆GT;联系＆LT; /按钮＆GT;
＆LT; /中心＆GT;
＆LT; BR＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =内容＆GT;＆LT; / DIV＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（'＃buttonview）。点击（函数（）{
$（'＃内容）。负载（tutoring.php'，函数（）{
}）;
}）;
$（'＃buttonadd）。点击（函数（）{
$（'＃内容）。负载（addtest.php'，函数（）{
}）;
}）;
$（'＃buttonadmin）。点击（函数（）{
$（'＃内容）。负载（admin.php的'，函数（）{
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
表code
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
＆LT;脚本类型=文/ JavaScript的SRC =http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（＃传递addStudent）。验证（{
调试：假的，
规则：{
studentid：必需的，
老师：必需的，
任务：必需的，
日期：必需的，
}，
消息：{
studentid：请输入学生的ID号。
老师：请输入您的名字。
任务：请选择一个辅导任务。
日期：请选择一个日子。
}，
submitHandler：功能（形式）{
$阿贾克斯（{
网址：'add.php'，
键入：POST，
数据：$（＃传递addStudent）序列化（）。
成功：功能（数据）{
$（＃studentid）VAL（）。
$（'＃studentid）专注（）。
$（＃结果）空（）。
$（＃结果）追加（数据）。
}
}）;
返回false;
}
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;冠军＆GT; OMS辅导 - 添加学生和LT; /标题＆GT;
＆LT;身体GT;
使用这种形式的学生加入到辅导名单。
＆其中p为H.;
＆LT; DIV的风格=浮动：左;宽度：100％;保证金底：10;＆GT;
＆LT; DIV＆GT;
＆LT;表格名称=传递addStudentID =传递addStudent行动=的方法=邮报＆GT;
＆LT;字段集＆GT;＆LT;传奇＆gt;添加学生辅导列表＆LT; /传说＆GT;
＆LT; DIV＆GT;＆LT;标签=studentid＆GT;身份证号码：LT; /标签＆gt;＆LT;输入类型=文本名称=studentidID =studentid＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;标签=天与GT;日期和LT; /标签＆gt;＆LT;选择名称=日期ID =日期＆GT;
＆LT;期权价值=＆gt;请选择一个日期和LT; /选项＆GT;
＆LT;期权价值=星期一＆GT;周一与LT ;?回声$周一; ？＆GT;＆LT; /选项＆GT;
＆LT;期权价值=星期二＆GT;周二＆LT ;?回声$周二; ？＆GT;＆LT; /选项＆GT;
＆LT;期权价值=结婚＆GT;周三，LT ;?回声$周三; ？＆GT;＆LT; /选项＆GT;
＆LT;期权价值=星期四＆GT;周四＆LT ;?回声$周四; ？＆GT;＆LT; /选项＆GT;
＆LT;期权价值=星期五＆GT;周五和LT ;?回声$周五; ？＆GT;＆LT; /选项＆GT;
＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;标签=转让＆GT;辅导作业＆LT; /标签＆gt;＆LT;选择名称=转让ID =转让＆GT;
＆LT;期权价值=＆gt;请选择指定＆LT; /选项＆GT;
＆LT;期权价值=ATT＆GT;活动时间＆LT; /选项＆GT;
＆LT;期权价值=ACC＆GT; ACC＆LT; /选项＆GT;
＆LT;期权价值=高科技＆GT; ACC技术与LT; /选项＆GT;
＆LT;期权价值=AST＆gt;在学校和LT; /选项＆GT;
＆LT; /选择＆GT;＆LT; / DIV＆GT;
＆LT; DIV＆GT;＆LT;标签=老师＆GT;分配的老师和LT; /标签＆gt;＆LT;输入类型=文本名称=老师ID =老师＆GT;＆LT; / DIV＆GT;
＆LT;输入类型=提交名称=提交值=提交＆GT;
＆LT; /字段集＆GT;
＆LT; /形式GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =结果的风格=保证金左：4;宽度：350;＆GT;＆LT; DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
表单处理PHP code：
＆LT; PHP
$库MySQLi =新库MySQLi（本地主机，XXX，XXX，XXX）;
$ studentid = $ _REQUEST ['studentid'];
$天= $ _REQUEST ['日期'];
$分配= $ _REQUEST ['转让'];
$教师= $ _REQUEST ['老师'];
$ dayquery = $ mysqli-＆GT;查询（选择日期从天凡天='$天'）;
$ dayresult = $ dayquery-＆GT; fetch_array（）;
$日期= array_shift（$ dayresult）;
$时间戳=日期（Y-M-D H：我：S'）;
$ mysqli-＆GT;查询（INSERT INTO分配（ID，分配，assignteacher，日期，时间戳）
VALUES（'$ studentid'，'$分配，$老师'，'$日期'，'$时间戳'））;
$ namequery = $ mysqli-＆GT;查询（第一选择，最后学生WHERE students.id ='$ studentid'）;
$ nameresult = $ namequery-＆GT; fetch_array（）;
回声$ nameresult ['第一'。 '。$ nameresult ['过去'。添加成功。
$ teacherquery = $ mysqli-＆GT;查询（选择assignteacher从哪里来WHERE ID ='$ studentid'和日期='$日期）;
$行数= $ teacherquery-＆GT; NUM_ROWS;
如果（$行数大于1）{
而（$行= $ teacherquery-＆GT; fetch_array（））{
$ teachernames [] = $行[0];
}
$教师=破灭（''，$ teachernames）;
回声'＆LT; BR＆GT;＆LT; BR＆GT;注意：$ nameresult ['第一']'。 '。$ nameresult ['过去'。已添加了以下教师：'$老师。。 ';
回声他们可能有precedence。;
}
其他 {
}
$ alreadyadded = $ mysqli-＆GT;查询（选择assign.id，students.first，students.last，assign.assignment，assign.assignteacher从哪里来
LEFT JOIN学生
ON assign.id = students.id
WHERE assign.date ='$日期和assign.assignteacher ='$教师
ORDER BY assign.assignment ASC，students.last ASC）;
回声'＆LT; BR＆GT;＆LT; BR＆GT;＆LT; BR＆gt;您已拥有以下学生（S）分配给在这一天的教程;
回声'＆LT;表格边框=1＆GT;';
而（$行= $ alreadyadded-＆GT; fetch_array（））{
回声'<tr><td>'.$row['id'].'</td><td>'.$row['first'].'</td><td>'.$row['last'].'</td><td>'.$row['assignment'].'</td></tr>';
}
？＆GT;
在使用负荷方法加载到您的网页，大多数浏览器删除＆LT; HEAD＆GT; 标记
由于从jQuery 网站：
在此过程中，浏览器通常过滤从文档元素 如
＆LT; HTML＆GT;，＆LT;冠军＆GT;或＆LT; HEAD＆GT;元素。其结果是，元件 由.load检索（）可能不完全一样的，如果该文档 直接由浏览器进行检索。
所以，包括你的JavaScript在主网页，而不是在表单页面，或手动的JavaScript添加到您的主页动态。
I have an index page with three buttons at the top. On the click of each button a php file is loaded into the main div. One of these buttons loads a form that users fill out and submit. On submitting of the form I need it to not refresh the page and to load the resulting data into a div on the form page...not the main div.
If I load the form page on it's own (ie, not by clicking on the button, but just typing in the address of the form itself)...everything works fine. The form validation works, it submits without a refresh and the resulting data is returned into the results div on the form.
However, I load the index page and click on the button to load the form. The form loads correctly, but when I click submit it just refreshes the page...which causes the form to disappear since the div into which it is loaded is originally hidden. Also, the form doesn't validate and doesn't execute the php action.
Again, the form and its associate php work perfectly on their own. The issue only comes up when I load the form in the index page. So I'm assuming that this issue has something to do with me loading it into a div on the index page. Any help would be greatly appreciated.
Index code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="header">
<center><h2>OMS Tutoring Database</h2></center>
</div>
<div id="navbar">
<center>
<button class="navbutton" id="buttonview" type="button">View Tutoring Lists</button>
<button class="navbutton" id="buttonadd" type="button">Add Students</button>
<button class="navbutton" id="buttonadmin" type="button">Admin</button>
</center>
<br>
</div>
<div id="content"></div>
<script>
$(document).ready(function() {
$('#buttonview').click(function(){
$('#content').load('tutoring.php', function(){
});
});
$('#buttonadd').click(function(){
$('#content').load('addtest.php', function(){
});
});
$('#buttonadmin').click(function(){
$('#content').load('admin.php', function(){
});
});
});
</script>
</body>
</html>
Form Code
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#addstudent").validate({
debug: false,
rules: {
studentid: "required",
teacher: "required",
assignment: "required",
date: "required",
},
messages: {
studentid: "Please enter the student's ID number.",
teacher: "Please enter your name.",
assignment: "Please select a tutoring assignment.",
date: "Please select a day.",
},
submitHandler: function(form) {
$.ajax({
url: 'add.php',
type: 'POST',
data: $("#addstudent").serialize(),
success: function(data) {
$("#studentid").val("");
$('#studentid').focus();
$("#results").empty();
$("#results").append(data);
}
});
return false;
}
});
});
</script>
</head>
<title>OMS Tutoring - Add Student</title>
<body>
Use this form to add students to the tutoring list.
<p>
<div style="float:left;width:100%;margin-bottom:10;">
<div>
<form name="addstudent" id="addstudent" action="" method="post">
<fieldset><legend>Add student to tutoring list</legend>
<div><label for="studentid">ID number</label><input type="text" name="studentid" id="studentid"></div>
<div><label for="day">Date</label><select name="date" id="date">
<option value="">Please select a day</option>
<option value="mon">Monday <? echo $monday; ?></option>
<option value="tue">Tuesday <? echo $tuesday; ?></option>
<option value="wed">Wednesday <? echo $wednesday; ?></option>
<option value="thu">Thursday <? echo $thursday; ?></option>
<option value="fri">Friday <? echo $friday; ?></option>
</select></div>
<div><label for="assignment">Tutoring assignment</label><select name="assignment" id="assignment">
<option value="">Please select an assignment</option>
<option value="att">Activity Time</option>
<option value="acc">ACC</option>
<option value="tech">ACC Tech </option>
<option value="ast">After School</option>
</select></div>
<div><label for="teacher">Assigning teacher</label><input type="text" name="teacher" id="teacher"></div>
<input type="submit" name="submit" value="submit">
</fieldset>
</form></div></div>
<div id="results" style="margin-left:4;width:350;"><div>
</body>
</html>
Form processing php code:
<?php
$mysqli = new mysqli('localhost', 'xxx', 'xxx', 'xxx');
$studentid = $_REQUEST['studentid'];
$day = $_REQUEST['date'];
$assignment = $_REQUEST['assignment'];
$teacher = $_REQUEST['teacher'];
$dayquery = $mysqli->query("SELECT date FROM days WHERE day='$day'");
$dayresult = $dayquery->fetch_array();
$date = array_shift($dayresult);
$timestamp = date('Y-m-d H:i:s');
$mysqli->query("INSERT INTO assign (id, assignment, assignteacher, date, timestamp)
VALUES ('$studentid', '$assignment', '$teacher', '$date', '$timestamp')");
$namequery = $mysqli->query("SELECT first, last FROM students WHERE students.id='$studentid'");
$nameresult = $namequery->fetch_array();
echo $nameresult['first'].' '.$nameresult['last'].' successfully added.';
$teacherquery = $mysqli->query("SELECT assignteacher FROM assign WHERE id='$studentid' AND date='$date'");
$rowcount = $teacherquery->num_rows;
if ($rowcount > 1) {
while ($row = $teacherquery->fetch_array()) {
$teachernames[] = $row[0];
}
$teachers = implode(', ', $teachernames);
echo '<br><br>Caution: '.$nameresult['first'].' '.$nameresult['last'].' has already been added by the following teachers: '.$teachers.'. ';
echo 'They may have precedence.';
}
else {
}
$alreadyadded = $mysqli->query("SELECT assign.id, students.first, students.last, assign.assignment, assign.assignteacher FROM assign
LEFT JOIN students
ON assign.id=students.id
WHERE assign.date='$date' AND assign.assignteacher='$teacher'
ORDER BY assign.assignment ASC, students.last ASC");
echo '<br><br><br>You already have the following student(s) assigned to tutorials on this day';
echo '<table border="1">';
while ($row = $alreadyadded->fetch_array()) {
echo '<tr><td>'.$row['id'].'</td><td>'.$row['first'].'</td><td>'.$row['last'].'</td><td>'.$row['assignment'].'</td></tr>';
}
?>
When you load the form into your page using the load method, most browsers delete the <head> tag.
As from the jquery website:
During this process, browsers often filter elements from the document such as
<html>,<title>, or<head>elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
So, include your javascript in the main page instead of in the form page, or manually add the javascript to your main page dynamically.
这篇关于在DIV使用Ajax提交表单，在股利无刷新返回PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
