如何保持AJAX不受刷新网站的影响 [英] How to keep AJAX from refreshing site
问题描述
我有一个下拉式表单。如果所需选项不可用，用户应该有可能通过其他表单添加它们（表单外部;而不是表单内部的表单）。
输入一个新的下拉菜单（通过另一个表单）后，它应该出现在相应的下拉菜单中，但是已经输入的所有其他数据应该保留在那里，以便用户不必再次插入它。
我可以用AJAX完成这个工作，所以我尝试了一下，但它确实刷新了我的页面（不知何故;至少其他表单的条目已经消失）。
将插入讲师和插入模块提交到数据库的工作原则如下。
是否可以将数据保存在表单中？
预先感谢！
以下是我的（简体）代码：
< html>
< head>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
< / head>
< body>
< div class =container>
< div class =col-md-8>
< h2>插入事件< / h2>
< br>
< form id =createSubjectFormaction =admin_createSubject_submit.phpmethod =POST>
< div class =form-group>
< label>名称< / label>
< input type =textclass =form-controlname =subject_namerequired />
< / div>
< hr>
< div class =form-group>
< label>代码< / label>
< input id =subjectCodetype =textclass =form-controlname =coderequired />
< / div>
< hr>
<？php
$ lec_selection =;
$ lec = mysqli_query（$ con，SELECT * FROM lecturers ORDER BY last_name）;
while（$ lec_row = mysqli_fetch_assoc（$ lec））{
$ lec_selection。=< option value =。$ lec_row ['lecturers_ID']。>。$ lec_row ['last_name']。，。$ lec_row ['first_name']。< / option>;
}
？>
< div class =form-group>
< label>讲师< / label>
<？php echo $ lec_selection？>
< / select>
< / div>
< hr>
<？php
$ mod_selection =;
$ mod = mysqli_query（$ con，SELECT * FROM modules ORDER BY name）;
while（$ mod_row = mysqli_fetch_assoc（$ mod））{
$ mod_selection。=< option value =。$ mod_row ['name']。>。$ mod_row ['name']。[。$ mod_row ['code']。]< / option>;
}
？>
< div class =form-group>
< label>模块< / label>
< select multiple class =form-controlname =part_of_modulesrequired>
<？php echo $ mod_selection？>
< / select>
< / div>
< hr>
< button type =submitclass =btn btn-primary>插入< / button>
< / form>
< / div>
< div class =col-md-4>
< h3>插入讲师< / h3>
< form id =formname =form>
< div class =form-group>
< label>名字< / label>
< input id =lec_first_nametype =textclass =form-controlrequired />
< / div>
< div class =form-group>
< label>姓氏< / label>
< input id =lec_last_nametype =textclass =form-controlrequired />
< / div>
< div class =form-group>
< label> Institute< / label>
< input id =lec_institutetype =textclass =form-controlrequired />
< / div>
< div>
< button id =lec_submitonclick =myFunction（）type =submitclass =btn btn-primary>插入< / button>
< / div>
< / form>
< script>
函数myFunction（）{
var first_name = document.getElementById（lec_first_name）.value;
var last_name = document.getElementById（lec_last_name）.value;
var institute = document.getElementById（lec_institute）。value;
//当输入的信息存储在数据库中时，返回成功的数据提交消息。
var dataString ='first_name1 ='+ first_name +'& last_name1 ='+ last_name +'& institute1 ='+ institute;
if（first_name ==''|| last_name ==''|| institute ==''）{
alert（Bitte alle Felderausfüllen！）;
} else {
// AJAX代码提交表单。
$ .ajax（{
type：POST，
url：admin_createLecturer_submit.php，
data：dataString，
cache：false，
成功：function（html）{
alert（html）;
}
}）;
}
返回false;
}
< / script>
< h3>插入模块< / h3>
< form id =formname =form>
< div class =form-group>
< label>代码< / label>
< input id =mod_codetype =textclass =form-controlrequired />
< / div>
< div class =form-group>
< label>名称< / label>
< input id =mod_nametype =textclass =form-controlrequired />
< / div>
< div class =form-group>
< label>类型< / label>
< select class =form-controlname =modul_typerequired>
< option id =mod_typevalue =1> 1< / option>
< option id =mod_typevalue =2> 2< / option>
< option id =mod_typevalue =3> 3< / option>
< / select>
< / div>
< div class =form-group>
< label>年< / label>
< input id =mod_yeartype =textclass =form-controlrequired />
< / div>
< div>
< button id =mod_submitonclick =myFunction2（）type =submitclass =btn btn-primary> Modul eintragen< / button>
< / div>
< / form>
< script>
函数myFunction2（）{
var mod_code = document.getElementById（mod_code）。value;
var mod_name = document.getElementById（mod_name）.value;
var mod_type = document.getElementById（mod_type）.value;
var mod_year = document.getElementById（mod_year）.value;
//当输入的信息存储在数据库中时，返回成功的数据提交消息。
var dataString ='mod_code ='+ mod_code +'& mod_name ='+ mod_name +'& mod_type ='+ mod_type +'& mod_year ='+ mod_year;
if（mod_code ==''|| mod_name ==''|| mod_type ==''|| mod_year ==''）{
alert（Bitte alle Felderausfüllen！）;
} else {
// AJAX代码提交表单。
$ .ajax（{
type：POST，
url：admin_createModule_submit.php，
data：dataString，
cache：false，
成功：function（html）{
alert（html）;
}
}）;
}
返回false;
}
< / script>
< / div>
< / div>
< / div>
< / body>
< / html>
您需要停止使用 preventDefault（）
在函数中传递事件并调用 在表单中，您需要使用 I have a form with dropdowns. If the desired option(s) are not available, the user should have to possibility to add them trough other forms (outside the form; not a form inside the form). After entering a new dropdown entry (trough another form) it should appear in the respective dropdown, but all the other data already entered should remain there so that the user does not have to insert it again. I tought this could be done with AJAX, so I tried, but it does refresh my page (somehow; at least the other form's entries are gone). The submission of the "Insert lecturer" and "Insert module" to the database works as intened. Is it possible to keep the data in the form? Thanks in advance! Here is my (simplified) code so far:
You need to stop the form from submitting by using In your function, pass the event and call On your form you need to use 这篇关于如何保持AJAX不受刷新网站的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ preventDefault（） code $
$ b $ pre $ function myFunction（event）{
event.preventDefault（）;
$ .ajax（
//您的自定义
）
}
onsubmit =myFunction（event） <html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-8">
<h2>Insert event</h2>
<br>
<form id="createSubjectForm" action="admin_createSubject_submit.php" method="POST">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="subject_name" required />
</div>
<hr>
<div class="form-group">
<label>Code</label>
<input id="subjectCode" type="text" class="form-control" name="code" required />
</div>
<hr>
<?php
$lec_selection = "";
$lec = mysqli_query($con,"SELECT * FROM lecturers ORDER BY last_name");
while($lec_row = mysqli_fetch_assoc($lec)){
$lec_selection .= "<option value=".$lec_row['lecturers_ID'].">".$lec_row['last_name'].", ".$lec_row['first_name']."</option>";
}
?>
<div class="form-group">
<label>Lecturer</label>
<select multiple class="form-control" name="modul_type" required>
<?php echo $lec_selection ?>
</select>
</div>
<hr>
<?php
$mod_selection = "";
$mod = mysqli_query($con,"SELECT * FROM modules ORDER BY name");
while($mod_row = mysqli_fetch_assoc($mod)){
$mod_selection .= "<option value=".$mod_row['name'].">".$mod_row['name']." [".$mod_row['code']."]</option>";
}
?>
<div class="form-group">
<label>Module</label>
<select multiple class="form-control" name="part_of_modules" required>
<?php echo $mod_selection ?>
</select>
</div>
<hr>
<button type="submit" class="btn btn-primary">Insert</button>
</form>
</div>
<div class="col-md-4">
<h3>Insert Lecturer</h3>
<form id="form" name="form">
<div class="form-group">
<label>First name</label>
<input id="lec_first_name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Last name</label>
<input id="lec_last_name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Institute</label>
<input id="lec_institute" type="text" class="form-control" required />
</div>
<div>
<button id="lec_submit" onclick="myFunction()" type="submit" class="btn btn-primary">Insert</button>
</div>
</form>
<script>
function myFunction() {
var first_name = document.getElementById("lec_first_name").value;
var last_name = document.getElementById("lec_last_name").value;
var institute = document.getElementById("lec_institute").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'first_name1=' + first_name + '&last_name1=' + last_name + '&institute1=' + institute;
if (first_name == '' || last_name == '' || institute == '') {
alert("Bitte alle Felder ausfüllen!");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "admin_createLecturer_submit.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
</script>
<h3>Insert Module</h3>
<form id="form" name="form">
<div class="form-group">
<label>Code</label>
<input id="mod_code" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Name</label>
<input id="mod_name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control" name="modul_type" required>
<option id="mod_type" value="1">1</option>
<option id="mod_type" value="2">2</option>
<option id="mod_type" value="3">3</option>
</select>
</div>
<div class="form-group">
<label>Year</label>
<input id="mod_year" type="text" class="form-control" required />
</div>
<div>
<button id="mod_submit" onclick="myFunction2()" type="submit" class="btn btn-primary">Modul eintragen</button>
</div>
</form>
<script>
function myFunction2() {
var mod_code = document.getElementById("mod_code").value;
var mod_name = document.getElementById("mod_name").value;
var mod_type = document.getElementById("mod_type").value;
var mod_year = document.getElementById("mod_year").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'mod_code=' + mod_code + '&mod_name=' + mod_name + '&mod_type=' + mod_type + '&mod_year=' + mod_year;
if (mod_code == '' || mod_name == '' || mod_type == '' || mod_year == '') {
alert("Bitte alle Felder ausfüllen!");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "admin_createModule_submit.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
</script>
</div>
</div>
</div>
</body>
</html>
preventDefault()preventDefault ()function myFunction (event){
event.preventDefault ();
$.ajax(
// your custom
)
}
onsubmit="myFunction (event)"
