使用Ajax查看的jQuery POST表单
[英]jQuery POST form that is viewed with Ajax
问题描述
好的，这是我第一次登录，但是有一个我找不到的问题。 也许我使用了错误的搜索词，或者它是我的英语破损。 但希望有人能指出我正确的方向。
我的情况。 我有一个用户列表。 当我单击其中一个时，将使用javascript / AJAX打开第二个屏幕。 一些CSS样式会执行分屏操作。
在第二个屏幕中，我显示一个包含或不包含某些信息的表单。 到现在为止还挺好。 我想要的是，当您更改某些信息并按“提交/保存”按钮时，数据将保存在数据库中，而无需刷新页面。 但是我做错了。 当我按下按钮时，ajax分屏消失。 但是我在jquery上链接的页面没有任何作用。
一些代码是荷兰语，请询问是否需要翻译。
我的代码如下：页面users.php
<script>
function jsAjaxVieuwUser(str) {
if (str == "") {
document.getElementById("mainRight").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("mainRight").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "ajaxBeheer.php?VieuwUser=" + str, true);
xmlhttp.send();
document.getElementById("mainRight").style = "display: inline-block;"; // Don`t show the start table
document.getElementById("closeUser").style = "display: block;"; // Don`t show the start table
}
}
</script>
<div class="main">
<div class="mainInfo">
<h3>Gebruikers</h3>
</div>
<div class="mainContent">
<div class="mainLeft" id="mainLeft">
<div class="actionBar">
<div><a href="newuser.php"><button class="button button2">Nieuwe gebruiker</button></a></div>
<div id="closeUser"><a href="#" onClick="closeUserVieuw()"><button class="button button2"> << </button></a></div>
</div>
<div class="list" id="userList">
<ul>
<li class="listheader"><div class="listFirstColum">Naam gebruiker</div> <div class="listSecondColum">Laatste login</div></li>
<?php
if(!isset($_GET['limit'])){
// START, AANTAL
$limit = '0 , 10';
}
$result = $db->select("SELECT ID, user_name, user_last_login FROM users ORDER BY ID ASC LIMIT ".$limit." ",array(''),array(''));
while ($row = $result->fetch_assoc()) {
echo '<a href="#" onClick="jsAjaxVieuwUser('.$row['ID'].')"><li> <div class="listFirstColum">'.$row['user_name'].'</div> <div class="listSecondColum">'.$row['user_last_login'].'</div> </li></a>';
}
?>
</ul>
</div>
</div>
<div class="mainRight" id="mainRight">
<h1>HALLO</h1>
</div>
</div>
</div>
页面ajaxBeheer.php
if(isset($_GET['VieuwUser'])){
$disabled = 'disabled';
$idUser = $_GET['VieuwUser'];
$result = $db->select(" SELECT users.ID,
users.user_name,
users.user_email,
userinfo.userid,
userinfo.user_firstname,
userinfo.user_lastname,
userinfo.user_birthday,
userinfo.user_adress,
userinfo.user_adressnr
FROM users INNER JOIN userinfo
ON userinfo.userid = users.ID
WHERE users.ID=? ", array($idUser),array('%i'));
while ($row = $result->fetch_assoc()) {
//Gebruikers gegevens
$username = $row['user_name'];
$user_email = $row['user_email'];
//Personal data
$user_firstname = $row['user_firstname'];
$user_lastname = $row['user_lastname'];
$user_birthday = $row['user_birthday'];
$user_adress = $row['user_adress'];
$user_adressnr = $row['user_adressnr'];
}
// make the date readable, but if its empty make it 0000
if ($user_birthday == '0000-00-00' || empty($user_birthday)) {
$user_birthday = ' ';
}else{
$date = DateTime::createFromFormat('Y-m-d', $user_birthday);
$user_birthday = $date->format('d-m-Y');
}
?>
<div class="contentHolder" style="width: 100%;">
<div class="header">
<h3 style="width: 100%; text-align: center;">Gegevens medewerker: <?= $username ?></h3>
</div>
<div class="prLeftColomn colomn">
<form name="gebruiker" id="formId" method="POST">
<p><div class="omschrijving">Voornaam</div><div class="waarde"><input type="text" name="firstname" value="<?= $user_firstname ?>" /></div></p>
<p><div class="omschrijving">Achternaam</div><div class="waarde"><input type="text" name="firstname" value="<?= $user_lastname ?>" /></div></p>
<p><div class="omschrijving">Email</div><div class="waarde"><input type="text" name="firstname" value="<?= $user_email ?>" /></div></p>
<p><div class="omschrijving">Geboorte datum</div><div class="waarde"><input type="text" name="firstname" value="<?= $user_birthday ?>" /></div></p>
<p><div class="omschrijving">Telefoon</div><div class="waarde"><input type="text" name="firstname" value="" /></div></p>
<p><div class="omschrijving">Adres + huisnummer</div><div class="waarde"> <?= $user_adress.' '.$user_adressnr ?></div></p>
<p><div class="omschrijving">Postcode</div><div class="waarde"> </div></p>
<p><div class="omschrijving">Plaats</div><div class="waarde"> </div></p>
<p><div><input class="button" type="submit" name="updateGebruiker" value="UPDATE" onclick="save()"/></div></p>
</form>
</div>
<style type="javascript">
function save(){
var query = $('#formId').serialize();
var url = 'updateUser.php';
$.post(url, query, function (response) {
alert (response);
});
}
</style>
页面updateUser.php
<?php
$table = 'userinfo';
$data = array('user_firstname' => 'test');
$format = array('%s');
$where = array('id' => '3');
$where_format = array('%i');
$updateCalc = $db->update($table, $data, $format, $where, $where_format);
?>
2 个解决方案
解决方案1
0 已采纳 2018-08-11 14:48:26
刷新页面的原因是因为您正在使用带有“提交”按钮的表单，以防止它只是阻止表单提交
如果您有Jquery，请使用以下命令
//option A
$("form#formId").submit(function(e){
e.preventDefault();
});
和纯js解决方案是
document.getElementById('formId').addEventListener('submit', function(e) {
e.preventDefault();
});
解决方案2
0 2018-08-12 20:09:06
好，终于可以了。 在ajaxBeheer.php脚本中有jquery。 现在，我在执行ajax的页面中拥有它。 那对我有用。 jQuery链接
位于标题中。
我现在有第二个屏幕，其中的信息无需刷新页面即可更新。 ：D它没有安全性，因此对于每个也想要使用它的人都需要更新！ 问题是第二个屏幕没有刷新页面。
希望我可以帮助其他人，因为这对我来说也很难找到信息。
整个代码：Page users.php：
<?php
require_once (__DIR__.'/safeuser.php');
require_once (__DIR__.'/include/topheader.php');
require_once (__DIR__.'/include/config.inc.php');
require_once (__DIR__.'/classes/class-db.php');
?>
<script>
function jsAjaxVieuwUser(str) {
if (str == "") {
document.getElementById("mainRight").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("mainRight").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "ajaxBeheer.php?VieuwUser=" + str, true);
xmlhttp.send();
document.getElementById("mainRight").style = "display: inline-block;"; // Don`t show the start table
document.getElementById("closeUser").style = "display: block;"; // Don`t show the start table
}
}
function save(){
// Get the form.
var form = $('#formId');
// Get the messages div. Too show the messages on screen
var formMessages = $('#form-messages');
// TODO: The rest of the code will go here...
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// TODO
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
alert (response);
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
}
function closeUserVieuw() {
var x = document.getElementById("mainRight");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
document.getElementById("closeUser").style = "display: none;"; // Don`t show the start table
}
}
</script>
<style type="text/css">
</style>
<div class="main">
<div class="mainInfo">
<h3>Gebruikers</h3>
</div>
<div class="mainContent">
<div class="mainLeft" id="mainLeft">
<div class="actionBar">
<div><a href="newuser.php"><button class="button button2">Nieuwe gebruiker</button></a></div>
<div id="closeUser"><a href="#" onClick="closeUserVieuw()"><button class="button button2"> << </button></a></div>
</div>
<div class="list" id="userList">
<ul>
<li class="listheader"><div class="listFirstColum">Naam gebruiker</div> <div class="listSecondColum">Laatste login</div></li>
<?php
if(!isset($_GET['limit'])){
// START, AANTAL
$limit = '0 , 10';
}
$result = $db->select("SELECT ID, user_name, user_last_login FROM users ORDER BY ID ASC LIMIT ".$limit." ",array(''),array(''));
while ($row = $result->fetch_assoc()) {
echo '<a href="#" onClick="jsAjaxVieuwUser('.$row['ID'].')"><li> <div class="listFirstColum">'.$row['user_name'].'</div> <div class="listSecondColum">'.$row['user_last_login'].'</div> </li></a>';
}
?>
</ul>
</div>
</div>
<div class="mainRight" id="mainRight">
<h1>HALLO</h1>
</div>
</div>
</div>
<!-- FOOTER -->
</div>
</body>
</html>
ajaxBeheer.php：
<?php
// name: ajaxBeheer.php
require_once (__DIR__.'/classes/class-users.php');
require_once (__DIR__.'/include/config.inc.php');
if(isset($_GET['q'])){
$zoek = $_GET['q'];
$param = "$zoek%"; // Zoek alleen op voorletter
$getGebruiker = $db->select("SELECT * FROM users WHERE naam LIKE ?",array($param),array('s'));
?>
<div id="tableUsers">
<div class="headRow" style="" id="tableUsers">
<div class="cell" style="width: 70%">Gebruiker</div>
<div class="cell" style="width: 30%; border-left: 2px solid #fff; border-right: 2px solid #fff;">Status</div>
</div>
<?php
while ($myrow = $getGebruiker->fetch_assoc()) {
if($myrow['active'] == '1'){
$gebrActive = 'Aktief';
} else {
$gebrActive = 'gedeaktiveerd';
}
echo '<a style="display:block" href="?ID='.$myrow['id'].'">
<div class="row">
<div class="cell" style="width: 70%">'.$myrow['naam'].'</div>
<div class="cell" style="width: 30%; border-left: 1px solid #fff; border-right: 1px solid #fff;">'.$gebrActive.'</div>
</div></a>';
}
echo '</div>';
}
if(isset($_GET['VieuwUser'])){
$disabled = 'disabled';
$idUser = $_GET['VieuwUser'];
$result = $db->select(" SELECT users.ID,
users.user_name,
users.user_email,
userinfo.userid,
userinfo.user_firstname,
userinfo.user_lastname,
userinfo.user_birthday,
userinfo.user_adress,
userinfo.user_adressnr
FROM users INNER JOIN userinfo
ON userinfo.userid = users.ID
WHERE users.ID=? ", array($idUser),array('%i'));
while ($row = $result->fetch_assoc()) {
//Gebruikers gegevens
$username = $row['user_name'];
$user_email = $row['user_email'];
//Personal data
$user_firstname = $row['user_firstname'];
$user_lastname = $row['user_lastname'];
$user_birthday = $row['user_birthday'];
$user_adress = $row['user_adress'];
$user_adressnr = $row['user_adressnr'];
}
// make the date readable, but if its empty make it 0000
if ($user_birthday == '0000-00-00' || empty($user_birthday)) {
$user_birthday = ' ';
}else{
$date = DateTime::createFromFormat('Y-m-d', $user_birthday);
$user_birthday = $date->format('d-m-Y');
}
?>
<div class="contentHolder" style="width: 100%;">
<div class="header">
<h3 style="width: 100%; text-align: center;">Gegevens medewerker: <?= $username ?></h3>
</div>
<div class="prLeftColomn colomn">
<form name="gebruiker" id="formId" action="updateUser.php">
<p><div class="omschrijving">Voornaam</div><div class="waarde"><input type="text" name="firstname" value="<?= $user_firstname ?>" /></div></p>
<p><div class="omschrijving">Achternaam</div><div class="waarde"><input type="text" name="lastname" value="<?= $user_lastname ?>" /></div></p>
<p><div class="omschrijving">Email</div><div class="waarde"><input type="text" name="useremail" value="<?= $user_email ?>" /></div></p>
<p><div class="omschrijving">Geboorte datum</div><div class="waarde"><input type="text" name="userbirthday" value="<?= $user_birthday ?>" /></div></p>
<p><div class="omschrijving">Telefoon</div><div class="waarde"><input type="text" name="usertel" value="" /></div></p>
<p><div class="omschrijving">Adres + huisnummer</div><div class="waarde"> <?= $user_adress.' '.$user_adressnr ?></div></p>
<p><div class="omschrijving">Postcode</div><div class="waarde"> </div></p>
<p><div class="omschrijving">Plaats</div><div class="waarde"> </div></p>
<p><div><input class="button" type="submit" name="updateGebruiker" value="UPDATE" onclick="save()"/></div></p>
</form>
</div>
<div class="header" style="margin-top: 5%">
<h3 style="width: 90%; text-align: center;">Uren overzicht</h3>
</div>
<div id="tableUserUren">
<div class="prLeftColomn colomn">
<label>Uren deze week</label>
<input type="text" value="" style="background: white;" <?= $disabled ?> />
<label>Uren deze maand</label>
<input type="text" value="" style="background: white;" <?= $disabled ?> />
<label>Uren vorige maand</label>
<input type="text" value="" style="background: white;" <?= $disabled ?> />
<label>Uren Vrij genomen</label>
<input type="text" value="" style="background: white;" <?= $disabled ?> />
<label></label>
<input type="text" value="" style="background: white;" <?= $disabled ?> />
</div>
<div class="prRightColomn colomn">
</div>
</div>
</div>
<?php
}
?>
updateUser.php
<?php
require_once (__DIR__.'/include/config.inc.php');
require_once (__DIR__.'/classes/class-db.php');
$username = $_POST['firstname'];
// Ready too add the username
$table = 'users';
$data = array('user_name' => $username);
$format = array('%s');
$newJob = $db->insert($table, $data, $format);
if($newJob != $db::SQLSUCCESFULL){ // Variable is 00000
echo 'Er is helaas iets fout gegaan met het toevoegen van de regel. Code:'.$newJob;
header('location: '.$_SERVER['REMOTE_HOST'].'newuser.php?err=DATABASE&code='.$newJob);
exit();
}else{
echo 'succes!'.$username;
}
?>
jQuery AJAX POST表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.