个人中心
gpt4 book ai didi

javascript - 如何使 ajax 与数据库交互以便发布、获取和删除？

转载 作者：行者123 更新时间：2023-11-28 08:41:05 24 4
gpt4 key购买 nike

如何使用 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 中您将找到更多示例。

关于javascript - 如何使 ajax 与数据库交互以便发布、获取和删除？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20489242/

24 4 0
文章推荐： css - 字体未正确呈现/显示？
文章推荐： javascript - 使用 PHP 和 JavaScript 从不同地址获取 latlng
文章推荐： javascript - 根据列值或属性 href 列值将颜色设置为 FlexiGrid 行
文章推荐： javascript - 在页面上异步加载外部脚本是否会增加页面加载的延迟
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com