Question

当尝试将我的数据从我的警报发送到json.stringify（）时，它返回为空[]。

<html>
<head>
        <meta charset = "utf-8">
        <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>
        <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
        <script>
         formData = {};
          var formData = JSON.stringify($("#myForm").serializeArray());

          $.ajax({
    url: "myurlfortesting.com",
    data: formData,
    dataType : 'json',
    contentType: 'application/json',
    type: 'POST',
    success: function (response) {
      console.log(response);

    }
});
alert(formData)
</script>

  <body>

        <form class="myForm" id = "myForm" method="POST" >
            <div class="form-group row">
            <label for="example-text-input" class="col-2 col-form-label">Store</label>
              <input class="form-control" type="text"   name="store_code">
          </div>
          <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">companies</label>
              <input class="form-control" type="number"  name="company_code">
          </div>

          <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">People</label>
              <input class="form-control" type="number"   name="people_code">
          </div>


            <input value="Submit" type="submit">
        </form>

警报发送一个空的[]。单击警报中的表单提交按钮后，我想要的结果是一个字符串化的json对象，看起来像

'{"store_code": "New York", "company_code": 55, "people_code": 83}'

Answer 1

您的script标签在body标签上方。因此，脚本将在表单加载到DOM中之前执行。将script标记放在body标记的末尾，您将获得所需的输出。

此外，如果需要获取所需的数据格式，则需要分别解析每个输入字段中的值并构造formData。

删除标签中的type="POST"。
调用提交按钮的方法onclick
从方法中返回false，这样就不会触发默认的浏览器表单提交。

看看这段代码。

<html>

<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
  <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>

  <body>

    <form class="myForm" id="myForm">
      <div class="form-group row">
        <label for="example-text-input" class="col-2 col-form-label">Store</label>
        <input class="form-control" type="text" name="store_code">
      </div>
      <div class="form-group row">
        <label for="example-number-input" class="col-2 col-form-label">companies</label>
        <input class="form-control" type="number" name="company_code">
      </div>

      <div class="form-group row">
        <label for="example-number-input" class="col-2 col-form-label">People</label>
        <input class="form-control" type="number" name="people_code">
      </div>

      <input value="Submit" type="button" onclick="submitForm();">
    </form>

    <script>
      function submitForm() {
        formData = {};
        formData['store_code'] = $("#myForm ").find('input[name="store_code"]').val();
        formData['company_code'] = $("#myForm ").find('input[name="company_code"]').val();
        formData['people_code'] = $("#myForm ").find('input[name="people_code"]').val();
        console.log(formData);

        $.ajax({
          url: "myurlfortesting.com",
          data: formData,
          dataType: 'json',
          contentType: 'application/json',
          type: 'POST',
          success: function(response) {
            console.log(response);

          }
        });

        // important so you don't submit the form after the ajax call
        return false;
      }
    </script>
  </body>

Answer 2

请在下面尝试。在按钮onclick之后，我已经处理了表单操作。如果您需要更改才能提交。

<html>
<head>
        <meta charset = "utf-8">
        <script
        src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
        <script src="http://malsup.github.com/jquery.form.js"></script>
        <script src="https://requirejs.org/docs/release/2.3.5/minified/require.js"></script>
        <script>

    function process()
    {       


         formData = {};
          var formData = JSON.stringify($("#myForm").serializeArray());
          $.ajax({
                url: "myurlfortesting.com",
                data: formData,
                dataType : 'json',
                contentType: 'application/json',
                type: 'POST',
                success: function (response) {
                  console.log(response);

                }
            });
            alert(formData)

    }
</script>

  <body>

        <form class="myForm" id = "myForm" method="POST" >
            <div class="form-group row">
            <label for="example-text-input" class="col-2 col-form-label">Store</label>
              <input class="form-control" type="text"   name="store_code">
          </div>
          <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">companies</label>
              <input class="form-control" type="number"  name="company_code">
          </div>

          <div class="form-group row">
            <label for="example-number-input" class="col-2 col-form-label">People</label>
              <input class="form-control" type="number"   name="people_code">
          </div>


            <input value="button" type="submit" onclick="process();">
        </form>

使用JSON字符串化html表单结果时为空数据

2 个答案: