Question

如何使用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>

Answer 1

您的表单直接发送到您的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中你会找到更多的例子。

如何使ajax与数据库交互以发布，获取和删除？

1 个答案: