php - JSON 数据 ajax 不是正确的 POST 数据

Question

我正在尝试用 PHP 发布一些 JSON 数据。但是出了点问题。

这是我的 html --

<tbody>
    {% for x in sets %}
        <tr class="">
            <td>
                <div class="form-group">
                    {% if x is defined %}{{x}}</div>{% else %}{% endif %}
            </td>
            <td><input type="number" class ="first" name ="first"></td>
            <td><input type="number" class ="second" name ="second"></td>
            <td><span id="txtData"></span></td>
        </tr>
    {% endfor %}
</tbody>

这是我的脚本

    <script>
    $(document).ready(function () {
        $("#scoreForm").on('submit', function (e) {
            $("#submit").show();
            var data = $(this).serialize();
            data['first'] = $('#first').val();
            data['second'] = $('#second').val();
            $.ajax({
                url: '/processdata',
                type: 'post',
                data: JSON.stringify({ Frames : data }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (returnedData) {

所以当我发布数据时，它看起来像这样 ---

我想要的是当我发布数据时---

["frames": {"first":6, "second": 7}, {"first": 4, "second": 9}]

有谁知道我在哪里犯了错误!任何建议都会非常有用......

Answer 1

var data = $(this).serialize();

这会将表单数据转换为字符串。

data['first'] = $('#first').val();
data['second'] = $('#second').val();

然后这会尝试向字符串添加属性，但仅限于 DOM 中每个元素的第一个匹配项。

---

对此的简单解决方案是不要使用 JSON。

1. 去掉输入中的 id 属性。禁止重复 ID。
2. 更改名称以 [] 结尾以处理 PHP 独特的表单处理系统
3. 去掉所有像 data['first'] = $('#first').val();
这样的行
4. 将data: JSON.stringify({ Frames : data }),更改为data: data
5. 去掉 contentType: "application/json; charset=utf-8",
6. 将您的 PHP 更改为直接从 $_POST 读取，而不是期待 JSON 格式的请求

---

如果你真的想使用JSON，那么你需要自己构建数据结构。

您还会发现制作表单的工作量更大 work properly什么时候JS fails .

["frames": {"first":6, "second": 7}, {"first": 4, "second": 9}]

……但这不是有效的 JSON。

你需要更多类似的东西:

{"frames": [ {"first":6, "second": 7}, {"first": 4, "second": 9} ]}

1. 去掉输入中的 id 属性。禁止重复 ID。
2. 删除我在此答案顶部引用的所有行
3. 获取表单数据
   1. 创建一个数组(var data = [])
   2. 获取表格行:var rows = jQuery('tr') 是一个开始，但您可能想要更具体
   3. 为每一行获取所需的数据并将其添加到数组中:rows.each(function () { data.push({ first: jQuery(this).find("[name=first]").val()，第二个:jQuery(this).find("[name=second]").val() });