文章/答案/技术大牛

发布

社区首页 >问答首页 >当函数(响应)添加时，jQuery $.post不工作

问当函数(响应)添加时，jQuery $.post不工作
EN

Stack Overflow用户

提问于 2011-04-19 10:36:33

回答 2查看 640关注 0票数 0

我有以下js函数

function remove() {
    jQuery(document).ready(function() {
        jQuery("button").click(function(e) {
            var buttonHnd = jQuery(this);
            jQuery.post("script.php", {
            nume_client: jQuery("#nume_client").val()
            adresa: jQuery("#adresa").val(),
            comanda: jQuery("#comanda").val(),
            locatie: jQuery("#locatie").val(),
            istoric: jQuery("#istoric").val(),
            observatii: jQuery("#observatii").val()
        }, function(response) {
            alert("ok")
        },
        function(data) {
            buttonHnd.closest('tr').remove();
        });
    });
});
}

当我删除function(response)脚本工作时，它会删除该行。但是我也想把它添加到数据库中。在script.php文件中，我只有带有响应头的mysql查询。

第二个问题是，我的“删除”按钮只能在第二次单击时工作，而只有在删除所有行之后才能工作。

有人能帮助解决数据库问题吗？

您可以在这里找到script.php文件

编辑

这个岗位上少了一条线。该文件包含正确的代码。

javascript

jquery

回答 2

Stack Overflow用户

发布于 2011-04-19 10:42:21

更新

当您最近的编辑添加了缺失的代码行时，下面的原始答案不再适用。仍然存在语法错误(在nume_client: jQuery("#nume_client").val()之后缺少逗号)，但我假设这是复制和粘贴错误。添加逗号使其在语法上有效。

您的代码所做的是，每次调用remove时，它都要求jQuery在文档“准备好”时运行一个函数。只要在文档准备好之前从未调用remove (或者只调用一次)，这就很好了，因为之后jQuery只会立即调用该函数。

该函数所做的是在页面上的每个button元素上设置一个单击处理程序。然后(如果您再次调用它)它再次设置处理程序，所以现在页面上的每个button上都有两个处理程序，每个处理程序在单击按钮时都会尝试执行相同的操作。如果您第三次调用它，那么页面上的每个button上都会有三个处理程序，所有这些处理程序都试图在单击任何按钮时执行相同的操作。

一旦您至少调用了一次remove，页面上的所有button都会响应单击，尝试执行post并(在成功时)删除最近的包含tr的内容。

我认为你的意思是：

jQuery(document).ready(function() {
    jQuery("button").click(function(e) {
        var buttonHnd = jQuery(this);
        jQuery.post("script.php",
            {
                nume_client: jQuery("#nume_client").val(),
                adresa:      jQuery("#adresa").val(),
                comanda:     jQuery("#comanda").val(),
                locatie:     jQuery("#locatie").val(),
                istoric:     jQuery("#istoric").val(),
                observatii:  jQuery("#observatii").val()
            },
            function(data) {
                buttonHnd.closest('tr').remove();
            }
        );
    });
});

更改：

完全删除函数remove，因此这段代码在页面上遇到时立即执行，在DOM准备就绪时设置要调用的函数。确保在包含script标记的jQuery之后有这段代码。您需要修改调用remove的代码，而不是调用它。
删除第二个函数，留下第三个函数。jQuery.post接受URL、要发布的数据、函数以及数据类型字符串。您正在为最后一个参数传递一个函数，据我所知，它不受支持，而且几乎肯定不是您想要做的。:-)

这仍然会连接到页面上的每个按钮，这可能是您不想要的。相反，您可能希望使选择器更加具体(例如，使用ID、使用结构选择器、使用类等；对于jQuery，您可以使用很多选择来缩小范围)。

尽管这样可以工作，但它也会在button元素上留下悬空的事件处理程序，当tr被删除时，这些元素就会被删除。对于处理动态表，您可能希望使用delegate或live。delegate将事件挂在容器元素上，但只有在事件由与您提供的选择器匹配的元素生成的情况下，才会触发代码。只有一个事件处理程序，但它的作用很像在与选择器匹配的元素上有一个处理程序。live基本上是使用文档根作为容器的delegate。

在您的例子中，我可能会在table元素上使用table，并按照button[name="remove"]的方式使用选择器。示例HTML：

<table id='theTable'>
<tbody>
  <tr>
    <td>Blah blah blah</td>
    <td><button name='remove'>Remove</button></td>
  </tr>
  <tr>
    <td>Blah blah blah</td>
    <td><button name='remove'>Remove</button></td>
  </tr>
</tbody>
</table>

然后，使用该示例HTML：

jQuery(document).ready(function() {
    jQuery("#theTable").delegate('button[name="remove"]', 'click', function(e) {
        var buttonHnd = jQuery(this);
        jQuery.post("script.php",
            {
                nume_client: jQuery("#nume_client").val(),
                adresa:      jQuery("#adresa").val(),
                comanda:     jQuery("#comanda").val(),
                locatie:     jQuery("#locatie").val(),
                istoric:     jQuery("#istoric").val(),
                observatii:  jQuery("#observatii").val()
            },
            function(data) {
                buttonHnd.closest('tr').remove();
            }
        );
    });
});

您不必使用name，只要您能够确定哪些button元素应该以这种方式响应单击。如果表中button元素的所有都是remove按钮，则只需使用jQuery('#theTable').delegate('button', 'click', function...。

添加到更新中

你让我看一下script.php文件。对不起，我不太喜欢PHP，但是FWIW，脚本的主要内容是：

$sql="INSERT INTO `baza`.`tabel` (`1`, `2`, `3`) VALUES ('".$arr['adresa']."', '".$arr['nume_client']."', '".$arr['comanda']."')";

意见：

您没有做任何事情来转义$arr['adresa']中的值，等等。不这样做有两个大问题：

1. The query will break if (for instance) `$arr['adresa']` or any of the other fields has a `'` in it.
2. You're leaving yourself wide open to [SQL injection attacks](http://en.wikipedia.org/wiki/SQL_injection). Read the [php.net page on SQL injection](http://php.net/manual/en/security.database.sql-injection.php) and how to avoid it.

baza.tabel中的列真的有名称1、2和3吗？这是一个非常奇怪的桌子结构。通常，我希望看到列的名称为(例如) nume_client、adresa和comanda。

原始答案

在该代码中存在许多问题：

function remove() {

    jQuery(document).ready(function() {

        jQuery("button").click(function(e) {

            var buttonHnd = jQuery(this);

            nume_client: jQuery("#nume_client").val()
         // ^-- Here you're creating a label, I suspect you were trying to create a property

            adresa: jQuery("#adresa").val(),
         // ^-- And here

            comanda: jQuery("#comanda").val(),
         // ^-- And here, I expect this one's actually a syntax error,
         //     check your browser's JavaScript console for errors

            locatie: jQuery("#locatie").val(),
         // ^-- And here

            istoric: jQuery("#istoric").val(),
         // ^-- And here
            observatii: jQuery("#observatii").val()
         // ^-- And here
        }, function(response) { // <== Here you're passing a second function into `click`
            alert("ok")
        },

        function(data) { // <=== Here you're passing a *third* function into `click`
            buttonHnd.closest('tr').remove();
        });
    });
});
}

我猜，你可能想要这样的东西：

function remove() {

    jQuery(document).ready(function() {

        jQuery("button").click(function(e) {

            var buttonHnd = jQuery(this);

            jQuery.post(some_url_here,
                {
                    nume_client: jQuery("#nume_client").val(),
                    adresa: jQuery("#adresa").val(),
                    comanda: jQuery("#comanda").val(),
                    locatie: jQuery("#locatie").val(),
                    istoric: jQuery("#istoric").val(),
                    observatii: jQuery("#observatii").val()
                },
                function(response) {
                    buttonHnd.closest('tr').remove();
                }
            );
        });
    });
}

...but，我敢肯定，你不希望所有这些都封装在remove函数中。

票数 1

Stack Overflow用户

发布于 2011-04-19 10:41:34

这将破坏所有脚本(可能)，因为没有正确格式化。

            nume_client: jQuery("#nume_client").val()
            adresa: jQuery("#adresa").val(),
            comanda: jQuery("#comanda").val(),
            locatie: jQuery("#locatie").val(),
            istoric: jQuery("#istoric").val(),
            observatii: jQuery("#observatii").val()

这是无用的，你应该这样做，或至少这是我认为你想要做的。

var obj = {nume_client: jQuery("#nume_client").val()
            adresa: jQuery("#adresa").val(),
            comanda: jQuery("#comanda").val(),
            locatie: jQuery("#locatie").val(),
            istoric: jQuery("#istoric").val(),
            observatii: jQuery("#observatii").val()
};

无论如何，编辑，我认为您想做的是某种ajax

 jQuery("button").click(function(e) {
        var buttonHnd = jQuery(this);
        var data =  {
          nume_client: jQuery("#nume_client").val()
          adresa: jQuery("#adresa").val(),
          comanda: jQuery("#comanda").val(),
          locatie: jQuery("#locatie").val(),
          istoric: jQuery("#istoric").val(),
          observatii: jQuery("#observatii").val()
       };
       $.ajax({
             url: 'script.php',
             type: 'post',
             data:data,
             success: function (response){
                   alert('ok')
             },
             error:function (){
                  //in case you get a 500,404 error etcc 
             }
       });
    },
    function(data) {
        buttonHnd.closest('tr').remove();
    });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5715078

复制

相似问题

问当函数(响应)添加时，jQuery $.post不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当函数(响应)添加时，jQuery $.post不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当函数(响应)添加时，jQuery $.post不工作
EN