我的 ajax 代码不将数据发送到数据库

Question

我想使用 ajax 向数据库中添加数据但没有任何反应 我不知道 ajax 或 php 有什么问题 这是我的代码的一部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" >
          $(document).ready(function(){
        $("#commentForm").submit(function(){

            var U_N = $('input[name="U_N"]').val();
            var I_name = $('input[name="I_name"]').val();
            var context = $("#inputmessage").val();

            $.ajax({
                type: "POST",
                cache: false,  
                url : "aAddComm_Menu.php",
                data : {U_N:U_N,I_name:I_name,context:context},

            });

    });
    });//end of document ready function             
                </script>

这是 html 表单：

<form class="form-horizontal" role="form" id="commentForm" method="POST" action="">

                        <div class="form-group">
                            <label for="inputmessage" class="col-sm-2 control-label">comment</label>
                            <div class="col-sm-10">
                                <textarea name = "context" class="form-control" id="inputmessage"  rows="3" placeholder="Enter your comment here . . "></textarea>
                            </div>
                        </div>  <!-- End of /.form-group -->


                        <input type="hidden" value = "$Item['Item_Name']" name="I_name"/>
                        <input type="hidden" value ="$U_N"  name="U_N"/>

                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button name="SendC" type="submit" class="btn btn-primary" ;>Send</button>
                            </div>




                        </div>  

                    </form> 

这是用于添加到数据库的 php 页面的一部分

extract($_POST)

if(isset($context))
{
    mysql_query("INSERT INTO menu_commnet VALUES('$I_name','$U_N',NULL,NOW(),'$context')");

}

Answer 1

var U_N = $("input#U_N").val();
var I_name = $("#I_name").val();
var context = $("#context").val();

jQuery 选择器是错误的，你没有选择任何东西。 # 选择器代表 id 属性，但您尝试按 name 属性的值进行选择。您应该添加/更改输入字段的id 属性，或者使用

var U_N = $("input[name=U_N]").val();
var I_name = $("input[name=I_name]").val();
var context = $("[name=context]").val();

---

提示：下次使用developer console inside your browser，您可以轻松测试选择器是否正确。您可以像在 .js 文件中一样输入 javascript 代码并测试它是否按预期工作。

另外，不要在你的 PHP 中这样做，使用prepared statements。

Answer 2

您是否在后端脚本中包含了数据库连接？ 提取（$_POST）

'if(isset($context)) {
 mysql_query("INSERT INTO menu_commnet VALUES('$I_name','$U_N',NULL,NOW(),'$context')");
 }'

我认为你应该在这里包含你的数据库信息，'include_once("database info.php"); ，还要确保你的 ajax 将返回一个结果，并回显 php 错误，以确保它是一个 ajax 或 php 错误，

Answer 3

我对您的问题几乎没有意见：

1. 将$("document").ready(function(){ 替换为 $(document).ready(function(){
2. 在 PHP 中提取之前， 试试var_dump($_POST)

3. 根据您的 HTML 代码使用情况：

   var U_N = $('input[name="U_N"]').val();

   var I_name = $('input[name="I_name"]').val();

   var context = $("#inputmessage").val();

Answer 4

这是最终的工作示例。只需在提交回调函数中添加“ev”参数，然后在其中使用 ev.preventDefault()。

 $(document).ready(function(){
            $("#commentForm").submit(function(ev){

                ev.preventDefault();

                var U_N = $('input[name="U_N"]').val();
                var I_name = $('input[name="I_name"]').val();
                var context = $("#inputmessage").val();

                $.ajax({
                    type: "POST",
                    cache: false,
                    url : "aAddComm_Menu.php",
                    data : {U_N:U_N,I_name:I_name,context:context}

                });

            });
        });//end of document ready function

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" id="commentForm" method="POST" action="">
    <div class="form-group">
        <label for="inputmessage" class="col-sm-2 control-label">comment</label>

        <div class="col-sm-10">
            <textarea name="context" class="form-control" id="inputmessage" rows="3"
                      placeholder="Enter your comment here . . "></textarea>
        </div>
    </div>



    <input type="text" value="" name="I_name"/>
    <input type="text" value="" name="U_N"/>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button name="SendC" type="submit" class="btn btn-primary">Send</button>
        </div>
    </div>
</form>