Question

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

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

这一切都很好。当我尝试检查选中的复选框时，会出现问题。（这里的难句）似乎页面源中不存在数据。我认为这是因为ajax的异步工作。我真的需要选择来制造汽车！

最后，我的问题是我如何访问该选项数据？如果你不能，那还有吗您可以访问该数据的方式？您如何看待我处理cms系统的方法？好/坏/ omg / ...

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

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

 //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>

提前致谢，伯特

Answer 1

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

$(document).ready(function() {
    $('.options').click(function() {
        var optionsArray = [];
        $('.options input:checked').each(function() {
            optionsArray.push(this.name);
        });
        // now optionsArray has all your options
    });
});

Answer 2

好的，所以我先编辑你的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">）或将多个属性添加到您的选择（<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; 
});

请注意我在评论中指定了两个选择器，用于复选框或选择＆gt;选项

我认为应该做的工作。但是，要小心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脚本query MySQL to check what ID was generated并返回此内容：

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; 
});

访问使用jQuery的load（）函数加载的html内容

2 个答案: