[英]How do I make ajax interact with a database in order to post, get, and delete?
如何使用ajax在数据库中进行发布/删除/获取操作?
我希望能够发布并删除我发布到此链接的任何内容:
http://www.bmoseley.com/ajax/listrecords.php
(这是一项作业)
但是,我必须使用/ajax/addrecord.php和/ajax/deleterecord.php才能向/ajax/lisrecords.php添加和删除帖子
让我这样说:我不希望您假设您正在为我做作业,我希望有人解释我的代码有多错误以及对ajax的理解以及可以用来完成的ajax脚本。我的目标。
这是我的代码:
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
function validateForm ()
{
var x=document.forms["myForm"] ["fullname"].value;
if (x==null || x=="")
{
alert ("First name must be filled out");
return false;
}
}
function isNumberKey(evt) {
var e = evt || window.event; //window.event is safer,
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 47 || charCode > 57))
return false;
if (e.shiftKey) return false;
return true;
}
</script>
</head>
<body>
<div id="wrap">
<div id="wrapper">
<div id="info">
<form name="myForm" onsubmit="return validateForm()" method="get" action="http://www.bmoseley.com/ajax/listrecords.php">
<table border="0">
<tr>
<td><input class="fullname" maxlength="50" type="text" name="fname" placeholder="Name</td>
</tr>
<tr>
<td><input class="phonenumber" maxlength="10" onkeypress="return isNumberKey(event)" placeholder="Phone Number"></td>
</tr>
<tr>
<td><input class="button" type="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="displayInfo">
<script>
$.ajax({
type: 'GET',
data: JSON.stringify(foo),
url: "http://www.bmoseley.com/ajax/listrecords.php",
success: function(data){console.log(data);},
failure: function(e){console.log('ERROR: ' + e)}
});
</script>
</div>
</div>
</div>
</body>
</html>
您的表单是直接发送到您的php文件,您必须阻止它提交到您的php,而是通过ajax请求发送:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
function validateForm () {
var x=document.forms["myForm"] ["fullname"].value;
if (x==null || x=="")
{
alert ("First name must be filled out");
return false;
}
}
function isNumberKey(evt) {
var e = evt || window.event; //window.event is safer,
var charCode = e.which || e.keyCode;
if (charCode > 31 && (charCode < 47 || charCode > 57))
return false;
if (e.shiftKey) return false;
return true;
}
</script>
</head>
<body>
<div id="wrap">
<div id="wrapper">
<div id="info">
<form id="myForm" method="get" action="/ajax/listrecords.php">
<table border="0">
<tr>
<td><input class="fullname" maxlength="50" type="text" name="fname" placeholder="Name</td>
</tr>
<tr>
<td><input class="phonenumber" maxlength="10" onkeypress="return isNumberKey(event)" placeholder="Phone Number"></td>
</tr>
<tr>
<td><input class="button" type="submit" value="Submit"></td>
</tr>
</table>
</form>
<div id="displayInfo">
</div>
<script>
//loaded when dom is ready
$(function() {
var frm = $('#myForm');
//submit is nearly the same as onsubmit in your html before
frm.submit(function (ev) {
//preventDefault prevents the form to submit normally, because you dont want this, you want ajax!
ev.preventDefault();
//validating your form
if(validateForm())
{
//if valide make the request
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('ok');
//or when data is only a string you could add it to your div
$('#displayInfo').html(data);
}
});
}
});
});
</script>
</div>
</div>
</div>
</body>
</html>
在ajax-jquery-docs中,您将找到更多示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.