Question

我有一个简单的动态生成的选项选项，其中包含来自json文件的Ajax，我未能做的是在提交表单后将之前选择的选项保持为选中状态。尝试将PHP变量发送给JS，但我找不到在脚本标记中使用PHP代码的方法，并且使用PHP回显一切都很难看。有什么想法吗？

我的PHP + AJAX代码：

ini_set('display_errors', -1);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo '<pre>';
    var_dump($_POST);
    echo '</pre>';
}

?>

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
    <body>
        <form id="getsrc" method="post">
            <select name="links" id="links"></select>
        </form>
    </body>
    <script type="text/JavaScript">
        //get a reference to the select element
        $select = $('#links');
        //request the JSON data and parse into the select element
        $.ajax({
            url: 'links.json',
            dataType:'JSON',
            success:function(data){
                //clear the current content of the select
                $select.html('');
                //iterate over the data and append a select option
                $select.append('<option value="">Please select...</option>');
                $.each(data.link, function(key, val){
                    $select.append('<option value="' + val.name + '">' + val.name + '</option>');
                })
            },
            error:function(){
                //if there is an error append a 'none available' option
                $select.html('<option id="-1">none available</option>');
            }
        });

        $("#links").change(function(){
            this.form.submit();
        });

    </script>
</html>

我的JSON文件：

{"link": [
  {
    "id": "1",
    "name": "link1.html"
  },
  {
    "id": "2",
    "name": "link2.html"
  },
  {
    "id": "3",
    "name": "link3.html"
  },
  {
    "id": "4",
    "name": "link4.html"
  },
  {
    "id": "5",
    "name": "link5.html"
  }
]}

Answer 1

选项1：

也可以使用AJAX进行提交，这样就不会有页面（重新）加载，而select会保留以前的值。

$("#links").change(function(){
    var $f = $(this).parent('form');

    $.post(
        'yourServerScript.php',
        $f.serialize(), //+ "&a=you-can-attach-extra-params-if-you-like",
        function(data, tStatus, xhr){
            // do whatever the server response is ...

            if (data.success) {
                // do whatever you want if you pass success from the server (in result JSON)
            } else {
                // here you've stated an error, deal with it ...
            }
        },
        'json'
    )
})

来自服务器'yourServerScript.php'的响应消耗了你的帖子数据，应该返回如下内容：

{"success":true or false, ... other data that you want to send after processing the form post ...}

选项2：

您仍然可以正常发送帖子，页面将（重新）从服务器加载表单数据的处理结果，在这种情况下，为了保持选择之前选择的值，您还有多个选项，但我只会向你呈现一个优雅的：

从您的PHP脚本（对于处理帖子和页面呈现似乎相同），您可以在<select>上添加指定默认选定值的数据属性

<form id="getsrc" method="post">
    <select name="links" id="links"<?php if(!empty($_POST['links'])) echo 'data-selected="' . $_POST['links'] . '"'; ?>></select>
</form>

然后，在加载JSON并使用选项填充select的AJAX脚本中，检查此数据选择的属性

$.ajax({
    url: 'links.json',
    dataType:'JSON',
    success:function(data){
        //clear the current content of the select
        $select.html('');
        //iterate over the data and append a select option
        $select.append('<option value="">Please select...</option>');
        $.each(data.link, function(key, val){
            $select.append('<option value="' + val.name + '"' + (val.name == $select.data('selected') ? ' selected' : '') + '>' + val.name + '</option>');
        })
    },
    error:function(){
        //if there is an error append a 'none available' option
        $select.html('<option id="-1">none available</option>');
    }
});

PS：我看到您将name从JSON放到<option>值，应该有ID，然后根据数据选择的值（发送到的值）检查ID服务器使用POST）

提交后，选择Ajax，json和PHP保持选项的动态选择选项

1 个答案: