时间戳

首页 > 解决方案 > 如何将jquery中的变量和数组变量一起提交到php并返回它们？

javascript - 如何将jquery中的变量和数组变量一起提交到php并返回它们？

问题描述

我创建了一个表单（用于测试），其中包含带有 id 和 name 属性的文本字段。同样在同一个表单中，我有一个复选框，用户将检查该复选框以提交给 php。html格式如下：

<form id="f1" action="chkbx.php" method="get">
    <input type="text" name="t1" id="txt" />
    <br>
    <input type=checkbox name="color[]" class="color" value="c1"/>
    <label>chk1</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c2"/>
    <label>chk2</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c3"/>
    <label>chk3</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c4"/>
    <label>chk4</label>
    <hr>
    <input type="button" id="btn" value="Submmit" name="sub" />
</form>

我有 jquery 来处理表单，以便将文本字段存储在一个变量中，以及一个循环，它将遍历复选框以查看哪个框被选中并将其值存储在一个数组中。到目前为止一切正常。在 jquery 中，我使用 ajax 将表单传递给 php 文件，如下所示：

$(document).ready(function(){
$("#btn").click(function(){
    var dest = $("#f1").attr("action");
    var meth = $("#f1").attr("method");
    var txt = $("#txt");
    var col = [];
    $(".color").each(function(){
        if ($(this).is(":checked")){
            col.push($(this).val());
        }
    });
    console.log(col); // indicate that all checked values inserted in the array
    $.ajax({
        data: {d1: col, d2: txt},
        url: dest,
        method: meth,
        success: function(res){
            alert(res);
        }
    });
});

});

最后，这是我在 php 中的代码：

<?php

   $arrV = $_GET["d1"];
   $txtV = $_GET["t1"]; // i tried the variable name from jquery and tried d2 written in data section in ajax

   print_r($arrV);
   echo $txtV;

?>

请注意，当我尝试提醒每个变量 sepratley 时，它工作得很好（单独使用数组和单独使用 ajax 部分和 php 中的微小 cahnges 的变量）。但是，当我尝试检索它们时，它们都不起作用。经过几次尝试后，我得到了从 php 返回的以下错误（syntax_error undefined index, rangeError maximum call stack size exceeded）

我究竟做错了什么？请帮忙！

标签： javascriptphpjqueryhtml

解决方案

上面的代码有很多缺陷……你<form>用来提交 AND$.ajax一个。我会简化如下：

HTML

<form id="f1">
    <input type="text" name="t1" id="txt">
    <br>
    <input type=checkbox name="color[]" class="color" value="c1"/>
    <label>chk1</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c2"/>
    <label>chk2</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c3"/>
    <label>chk3</label>
    <hr>
    <input type="checkbox" name="color[]" class="color" value="c4"/>
    <label>chk4</label>
    <hr>
    <input type="button" id="btn" value="Submmit" name="sub" />
</form>

JS

<script>
    function getInputs( el ){
        var values = {};
        $(el + ' :input').not('[type="button"]').each(function(){
            if ($(this).attr('type') == 'radio' && $(this).is(':checked')) {
                values[this.name] = this.value;
            } else if ($(this).attr('type') == 'checkbox') {
                values[this.name] = $(this).is(':checked') ? 1 : 0;
            } else {
                values[this.name] = this.value;
            }
        });
        return values;
    }

    $(function(){

        $("#btn").click(function(){
            var $data = getInputs('#btn');
            $.ajax({
                url      : 'chkbx.php',
                type     : 'POST',
                dataType : 'json',
                data     : {data: $data}
            });
            return false;
        });

    });
</script>

PHP (chkbx.php)

<?php
    $data = $_POST['data'];
    echo print_r($data,true);
?>

以上内容可能不会按原样工作，但应该让您了解一种更清洁的方法。

推荐阅读