如何通过 FORM 为 jquery ajax 变量提供值

How to supply value to jquery ajax variable via a FORM?

本文关键字：变量 ajax jquery 何通过 FORM      更新时间：2023-09-26
如何

修改以下内容，使forminput是一个接受用户输入的文本区域表单框，而不是像现在这样硬编码？

提交表单后，它将在以下代码中填充表单输入：

data: JSON.stringify({json:*forminput*}),

在文本区域框中，数据将完全按照下面的javascript粘贴

。 
<html>
<head>
    <title></title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#postit").on("click", function () {
            var forminput = [{
                  "field1":"100",
                  "field2":"2000",
                  "field3":"400",
                },
                {
                  "field1":"110",
                  "field2":"2200",
                  "field3":"520"
                }];

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "http://localhost/capturedata",
                data: JSON.stringify({json:forminput}),
                dataType: 'json',
                success: function (data) {
                }
            });
        });
    });
</script>
<a href="#" id="postit">Submit</a>
</body>
</html>

整个想法没有意义，因为用户可能会输入一个无效的 JSON 值。在问题中，您说"数据将完全按照下面的javascript粘贴"-但如果不是呢？或者，如果用户输入的内容是有效的 JSON，但与你期望的格式相去甚远，该怎么办？用户可能会输入{"this":"is valid json"}，它将被接受并提交，但不是您的服务器所期望的。

话虽如此，要从字面上理解您的要求，您可以通过在页面上的某处添加以下内容来实现它：

<textarea id="forminput"></textarea>

然后在您的 JS 函数中，您可以使用以下内容获取值：

var forminput = $("#forminput").val();

。这会给你一个字符串形式的值。如果您想将其用作对象，就像使用问题中当前显示的forminput变量一样，则需要：

var forminput = $.parseJSON( $("#forminput").val() );

因此，为了解决我关于用户输入无效值的观点，您可以执行以下操作：

try {
    var forminput = $.parseJSON( $("#forminput").val() );
    // use forminput
} catch (e) {
    alert("Invalid input: " + e.message);
}

。但即使这样也只会捕获一般的无效 JSON 错误，它不会捕获用户输入错误格式的有效 JSON 以满足您的需求的情况。

如果用户以相同的格式粘贴值(以及括号和波浪形括号(，只需添加以下 HTML

<textarea>
</textarea>

然后更改 

var forminput = [{
                  "field1":"100",
                  "field2":"2000",
                  "field3":"400",
                },
                {
                  "field1":"110",
                  "field2":"2200",
                  "field3":"520"
                }];

自 

var forminput = $("textarea").val();
var forminput = $.parseJSON(forminput);
相关文章：