2

我对 jQuery ajax 的工作方式有点困惑。我正在尝试使用 jQuery 和 php 创建一个客户管理系统 (CMS)。

我想给用户创造汽车的机会。假设他必须定义一个“汽车名称”并检查复选框列表中的一些选项。在同一页面上，我让用户有机会添加或删除一些选项。这种添加和删除发生在 jQuery 和 ajax 中。当用户添加一个选项时，我调用一个处理该选项的 php 页面 (addOption.php) 并将其添加到数据库中。如果 ajax 调用成功，我使用 ajax load() 函数重新加载 div 中的选项。谁调用了一个 php 页面 (reloadOptions.php)，该页面从数据库中读出选项并将它们构造成一个复选框列表。

这一切都很好。当我尝试检查选中了哪些复选框时会出现问题。（此处难句） 页面源中似乎不存在数据。我认为这是因为 ajax 的异步工作而发生的。我真的需要创建汽车的选项！

最后，我的问题是如何访问该选项数据？如果你不能，还有办法访问这些数据吗？您如何看待我处理 cms 系统的方法？好 / 坏 / 天哪 / ...

以下是我使用的一些代码块：

页面 index.php ：处理选项和 html 代码的 jQuery/ajax

 //At the start i load the options in
$('.options').load('./php/OptionsReload.php');

$("#FormOptions").submit(function(e) {
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: $(e.target).serialize(),
        dataType: "json",
        success: function(data) {
            $('.options').load('./php/reloadOptions.php');
        }
    });
    return false; 
});

..................
//Form where you can add the option
     <form id="FormOptions">
             <input type="text" name="optionName" />
             <input type="submit" name="submitOption" value="Add option" />
</form>

......................
 //Div where i show the options to the user
      <form name="formChecks" method="post" enctype="multipart/form-data">
             <div class="options">
                   //Content loaded with jQuery
             </div>
       </form>

页面 addOption.php ：将选项添加到数据库的代码

 //Database connect
...
return mysql_query("INSERT INTO options(option) VALUES('". $POST_['optionName'] ."');");

页面 reloadOptions.php ：使用选项构造 html 的代码

<select name="mydropdown">
    <?php 
            $options = ...... connect with DB and select all the options
              while($row = mysql_fetch_assoc($options))
               {
                      echo ("<option value='" . $row['Id'] . "'>" . $row['optionName'] . "</option>");
               }
     ?>
</select>

在此先感谢，伯特

4

2 回答 2

0

也许我不明白你要做什么，但似乎你只是想获得所选选项的值。你能试一下吗？

$(document).ready(function() {
    $('.options').click(function() {
        var optionsArray = [];
        $('.options input:checked').each(function() {
            optionsArray.push(this.name);
        });
        // now optionsArray has all your options
    });
});
于 2012-10-05T18:26:34.880 回答
0

好的，所以我首先编辑了您的 JS。（编辑原始问题）

关于你的 PHP。它应该是 $_POST，你在这里写 $POST_：

return mysql_query("INSERT INTO options(option) VALUES('". $POST_['optionName'] ."');");

它应该是

return mysql_query("INSERT INTO options(option) VALUES('". $_POST['optionName'] ."');");

此外，请使用mysql_real_escape_string以避免任何类型的 SQLi 漏洞。

至于“复选框”，您不会生成复选框，而是通过使用带有选项的选择标签生成下拉菜单。为了允许多项选择，您可以继续将其更改为复选框（使用<input type="checkbox">）或将 multiple 属性添加到您的选择中（<select name="options[]" multiple="multiple">）。两者都会好的；就个人而言，我更喜欢复选框。

关于保存选择的值。您将不得不制作一个“缓存”。您可以执行以下操作：

$("#FormOptions").submit(function(e) {
    //if you stick to select>option, then selector should be:
    // $('.options option:selected')
    var savedOptions = $('.options input:checked');
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: { optionName : this.optionName },
        dataType: "json",
        success: function(data) {
            var _savedOptions = savedOptions;
            $('.options').load('./php/reloadOptions.php', function () {
                //if you stick to select>option, then selector should be:
                // $('.options option:selected')
                $('.options input:checked').each(function() {
                    for (var i in _savedOptions) {
                        if (_savedOptions[i].value == this.value) {
                            $(this).prop("checked", true);
                        }
                    }
                })
            });
        }
    });
    return false; 
});

请注意在评论中我为复选框或选择>选项指定了两个选择器

我认为这应该做的工作。但是，要小心 XSS 漏洞。如果您继续这样做，最好在生成 HTML 时使用 htmlentities，如下所示：

<select name="mydropdown" selected="selected">
    <?php 
            $options = ...... connect with DB and select all the options
              while($row = mysql_fetch_assoc($options))
               {
                      echo ("<option value='" . $row['Id'] . "'>" . 
                        htmlentities($row['optionName']) . "</option>");
               }
     ?>
</select>

如果您的客户端在 utf8 上运行，则只需为其添加参数（如果您在 PHP 5.4 上运行，则不再需要此参数）：

htmlentities($someStringInThisCaseOptionName, ENT_COMPAT | ENT_HTML401, "UTF-8");

但是，请允许我说您重新加载整个表单的方法不是最佳的。为此，您只需要一个 POST 请求：使 addOption.php 脚本返回 JSON，如下所示：{ valueGenerated : "some id"}。然后继续获取数据并添加选项。为此，您必须让 PHP 脚本查询 MySQL 以检查生成的 ID并仅返回以下内容：

echo "{ \"valueGenerated\" : \"$generatedID\" }";

然后在 JS 端做这样的事情：

$("#FormOptions").submit(function(e) {
    var optionName = this.optionName;
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: { optionName : optionName },
        dataType: "json",
        success: function(data) {
            var optionValue = data.valueGenerated;
            $('#formChecks select[name="dropdown"]').append(
                "<option value='" + optionValue + "'>" + optionName + "</option>"
            );
        }
    });
    return false; 
});

请注明：按照我做的代码，optionName必须转义，否则会导致 XSS 漏洞。您可以从 PHP 端或通过正确的 JS 来完成此操作，而不是我刚刚展示的快速附加。

我认为从 PHP 端执行此操作更容易（只需使用htmlentities），但是如果您希望其他客户端使用相同的 Web 请求，他们会“受苦”。所以，忽略前面的 JS 代码，更好的使用：

$("#FormOptions").submit(function(e) {
    var optionName = this.optionName;
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: { optionName : optionName },
        dataType: "json",
        success: function(data) {
            var optionValue = data.valueGenerated;
            var newOpt = $("<option></option>").val(optionValue).text(optionName);
            $('#formChecks select[name="dropdown"]').append(newOpt);
        }
    });
    return false; 
});
于 2012-10-05T18:27:38.237 回答