使用jquery模态表单将数据插入MYSQL答案

【问题标题】：Insert data into MYSQL using jquery modal form使用jquery模态表单将数据插入MYSQL
【发布时间】：2013-06-14 20:01:59
【问题描述】：

我有一个如下所示的页面，该页面显示来自数据库的用户记录列表，带有一个按钮。当我单击该按钮时，会显示一个 jquery 模态表单，其中包含一个允许某人输入其用户信息的表单。

我的问题是，当我单击模态表单上的“添加新用户”按钮时，数据应插入数据库。但是该数据不会进入数据库。

这是带有模态表单对话框的 users.php 页面中的代码

 <body>

    <h1>User Management System</h1>

    <div id="manage_user">
        <form action="" method="">

           // Here I display a table with user details.................

            <button id="FormSubmit">Add New User</button>
        </form>
    </div>

    <div id="dialog" class="new_user_dialog_box" title="Add New User">
        <p>Fill this form with your details and click on 'Add New User' button to register.</p>

        <p class="validateTips">All form fields are required.</p>

        <div id="new_user_form">
            <table>
                <tr>
                    <td>Name :</td>
                    <td><input type="text" name="name" value="" id="name" /></td>
                </tr>               
                <tr>
                    <td>Address :</td>
                    <td><input type="text" name="address" value="" id="address" /></td>
                </tr>               
                <tr>
                    <td>City :</td>
                    <td><input type="text" name="city" value="" id="city" /></td>
                </tr>
            </table>
        </div>
    </div>

 </body>

Javascript/jQuery 脚本是

        if ( bValid) { 

            jQuery.ajax({
                type: "POST", // HTTP method POST or GET
                url: "process.php", //Where to make Ajax calls
                dataType:"text", // Data type, HTML, json etc.
                data:bValid, //Form variables
                success:function(response){
                    //on success, hide  element user wants to delete.
                    //$('#item_'+DbNumberID).fadeOut("slow");
                },
                error:function (xhr, ajaxOptions, thrownError){
                    //On error, we alert user
                alert(thrownError);
                }
            });
            $(this).dialog("close");                    
        }

非常感谢这里的任何帮助。

谢谢。

【问题讨论】：

在单击按钮和将数据插入数据库之间有几个步骤。哪一步失败了？是否正在对服务器进行 AJAX 调用？它是否包含预期的数据？服务器的响应是什么？ PHP 代码是否按预期执行？ JavaScript 控制台中是否有任何错误？ PHP 日志中是否有任何错误？
@David 感谢您的回复。 JavaScript 控制台中没有任何错误。从模态表单对话框完成表单字段后，它正在关闭并且没有数据去向'
PHP 错误日志中也没有任何内容
如果您不熟悉浏览器调试工具，现在是熟悉它们的好时机。使用诸如 Chrome 开发者工具或 Firebug 之类的东西（无论你使用什么浏览器都应该有一些东西），监视请求和响应（可能在一个名为“网络”或“网络活动”的选项卡上或类似的东西上）。这将告诉您是否有任何内容实际发送到服务器、发送的具体内容以及服务器的响应是什么。
在萤火虫的All菜单中有一个名为response的选项卡，并且有这样的消息error in post array

标签： php mysql jquery

【解决方案1】：

看起来您实际上并未在 POST 中发送数据。查看 AJAX 调用中的这一行：

data:bValid, //Form variables

bValid 是什么？从该行上方代码的外观来看，它只是一个布尔值。但是 AJAX POST 中的 data 需要包含与表单元素对应的键/值对。试试这样的：

dataType: 'JSON',
data: { name: $('#name').val(), address: $('#address').val(), city: $('#city').val() }

这将发送一个键/值对的 JSON 对象，该对象从表单中 ID 为 name、address 和 city 的 HTML 元素中获取值。

【讨论】：

我刚试了一下，有提示SyntaxError: JSON.parse: unexpected character
然后我发现数据正在进入数据库。但不会同时显示在 users.php 页面中。如果要显示数据，我需要重新加载页面。
我能知道这是什么原因吗？谢谢。
@TNK：嗯，你在更新页面吗？ AJAX 请求不会重新加载页面，因此对页面内容的任何更新都需要手动完成。相反，重新加载页面也会更新内容。
@TNK：不。如果您有其他具体问题，那么您可以为此目的在 Stack Overflow 上创建一个新问题。但是，如果您正在寻找一个教您 Web 开发的人，那么对于 Stack Overflow 的范围来说这太宽泛了。我很乐意为具体的附加问题提供帮助，但听起来您需要找到一些关于 PHP、JavaScript、jQuery 和一般 Web 开发的初学者教程。而 Stack Overflow 并没有真正提供这一点。此评论线程的范围已经超出了原问题的范围。