php - jQuery AJAX 发布到 PHP 的 PDO INSERT 不使用变量 $ ('#id').val()

Question

我展示了 3 个代码片段。方法 1 和 2 不起作用第三个代码正在运行。

********* 不工作 1 开始 **************

<script>

 $(document).ready(function() {
             $('#sending').click(function(){   
// just 4 testing:
//var txtBoxVal = $('#TextBox1').val(); 
// alert(txtBoxVal); ==> ok: showing the value I want to send & INSERT into database via PDOinsertpost.php

     $.ajax({
                type: "POST",
                url: "./PDOinsertpost.php",                                                                                         
                data: 'postVal1=' + $('#TextBox1').val(),
                success: function(msg){
                    $('#reshow').html(msg);
                }

            }); // end Ajax Call
                // now trigger a reload via the click-function:             
            window.location.reload();
           }); //end event handler .click function 

    }); //end document.ready

</script>   

********* 不工作 1 结束 **************

现在在 $.ajax 中使用变量的方法(效果不佳):

********* 不工作 2 开始 **************

<script>

 $(document).ready(function() {
             $('#sending').click(function(){   
var txtBoxVal = $('#TextBox1').val();
 // an alert - just 4 testing:
// alert(txtBoxVal); // ok: showing the value I want to send & INSERT into database via PDOinsertpost.php

     $.ajax({
                type: "POST",
                url: "./PDOinsertpost.php",                                                                                         
                data: 'postVal1=' + txtBoxVal,
                success: function(msg){
                    $('#reshow').html(msg);
                }

            }); // end Ajax Call
                // now trigger a reload via the click-function:             
            window.location.reload();
           }); //end event handler .click function 

    }); //end document.ready

</script> 

********* 不工作 2 结束 **************

现在是“硬编码”的工作版本(？对我来说很好奇，这个正在工作 - 但其他的不...)

********* working1 开始 **************

<script>
 var txtBoxVal = "some hardcoded string for testing";
 $(document).ready(function() {
             $('#sending').click(function(){   

     $.ajax({
                type: "POST",
                url: "./PDOinsertpost.php",                                                                                         
                data: 'postVal1=' + txtBoxVal,
                success: function(msg){
                    $('#reshow').html(msg);
                }

            }); // end Ajax Call
                // now trigger a reload via the click-function:             
            window.location.reload();
           }); //end event handler .click function 

    }); //end document.ready

</script> 

********* working1 结束 **************

附加信息:与此同时，我发现一个空值正在与两个“不工作”的代码片段一起使用 $('#id').val()，这意味着:在数据库中插入了一个空值。

我是不是找错地方了？我是否需要使用 PDO-INSERT 在 .php 文件中做一些 htmlentities 之类的事情？

我希望这篇文章可以为我和其他人收集一些有用的信息。

提前致谢，-流量。

Answer 1

我在这里看到 2 个大问题:

1. 您正在重新加载页面(在您的所有示例中...)，而 ajax 请求尚未完成。这是一种非常危险和错误的方法，因为您无法确定您的 php 脚本是否会正确完成。如果您以任何方式重新加载，则不需要 ajax。
2. 您没有转义您的值，因此用户输入可能会破坏查询字符串。最简单的解决方案是使用一个对象，以便 jQuery 自动正确编码它:
   数据:{ 'postVal1': $('#TextBox1').val() },

我也没有看到您取消了默认的表单提交，但是作为第三个示例，我假设 button/#sending 元素不是提交按钮。如果没有，您也需要注意这一点。

编辑:当您使用提交按钮时，您需要阻止常规表单提交:

$('#sending').click(function(event){
   // prevent the default form submit
   event.preventDefault();
   ...