Question

我有一个基本的输入表格，包括姓名，年龄，电子邮件，密码。我正在尝试将其从HTML传递给Javascript，然后将其转换为外部JSON文件中的JSON字符串，然后我可以从中提取。我似乎无法将输入数据发布到我的json文件。我的JSON文件名为'formdata'，它与我的html / javascript以及我的jquery位于同一目录中。你看到可能导致它的原因吗？

    <main>
    <form id="myform" type="post">
        <fieldset>
            <legend>Sign Up</legend>
            <p>Please sign up for our website here!</p>
            <div class="elements">
                <label for="name">Name :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Please enter your name here" name="name" size="25" />
            </div>
            <div class="elements">
                <label for="username">Username :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Please enter your email here" name="email" size="25" />
            </div>
            <div class="elements">
                <label for="email">Email :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Please enter your email here" name="email" size="25" />
            </div>
            <div class="elements">
                <label for="password">Password :</label>
                <input required="required" type="password" value="" name="password" size="32" minlength="6" maxlength="32" />
            </div>
            <div class="elements">
                <label for="age">Age :</label>
                <input required="required" type="number" value="" id="age" name="age" size="3" />
            </div>
            <div class="elements">
                <label for="gender">Gender :</label>
                <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male
                <input type="radio" name="gender" value="Female" id="r2"> Female
            </div>
            <div class="submit">
                <input type="submit" id="submit" name="submit" class="btn" value="Send" />
            </div>
        </fieldset>
    </form>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btn").click(function(e) {
                var jsonData = {};

                var formData = JSON.stringify($("#formdata").serializeArray());

                $.each(formData, function() {
                    if (jsonData[this.name]) {
                        if (!jsonData[this.name].push) {
                            jsonData[this.name] = [jsonData[this.name]];
                        }
                        jsonData[this.name].push(this.value || '');
                    } else {
                        jsonData[this.name] = this.value || '';
                    }

                });
                console.log(jsonData);
                $.ajax({
                    url: "action.php",
                    type: "POST",
                    data: formData,
                    success: function(){},
                    dataType: "json",
                    contentType : "application/json",
                });
                e.preventDefault();
            });
        });

    </script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    </main>

Answer 1

这不能完全解决您的问题，但我发现您发布的代码有几个问题。

您需要将提交按钮上的id属性的值从提交更改为btn，以便此行可以正常工作$("#btn").click(function(e) {即。 <input type="submit" id="btn"
将var formData = JSON.stringify($("#formdata").serializeArray());更改为var formData = JSON.stringify($("#myForm").serializeArray());，因为您的表单的ID实际上是＆＃34; myForm＆＃34;
您有name="email"的两个输入，我怀疑第一个输入实际上是name="username"

另外，您提到要将这些结果保存到JSON文件中。您的javascript AJAX请求正在提交给＆＃34; action.php＆＃34;所以我假设你有一个PHP脚本，它处理结果并写入JSON文件。这部分有点模糊，所以只是从我看到的内容中澄清。

最后，从安全的角度来看，我很担心这个表单要求输入密码，并且你提到将它存储在服务器上的JSON文件中。你不应该用密码做到这一点。它们并不意味着以纯文本形式存储，应该承担很大的责任。

希望这有帮助！

HTML输入到外部JSON文件

1 个答案: