Question

您好，我正在尝试以JSON格式提交表单，该格式将重定向到新页面。我正在使用json.serialize插件来序列化表单数据。单击提交按钮后，页面将重定向，所有数据都将丢失。我不想在url中传递数据，我们可以通过其他方法传递数据吗？

这是我的代码-

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>

 <form id="form" method="post" action="otherpage.jsp">
<table>
  <thead>
    <tr>
      <th>Field 1</th>
      <th>Field 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="field1[]">id1</td>
      <td><input type="hidden" name="field2[]">dsda</td>
    </tr>
    <tr>
      <td><input type="text" name="field1[]">id2</td>
      <td><input type="hidden" name="field2[]">dsda</td>
    </tr>
  </tbody>
</table>
<button type="button" name="button" id="button">Submit</button>
</form>

Javascript-

  <script>
  $("#button").click(function(e){
    var jsonForm = $("#form").serializeJSON();
    var jsonFormString = JSON.stringify(jsonForm);
    localStorage.setItem('jsonFormData', JSON.stringify(jsonForm));
    $("#form").submit();
    var localObj = JSON.parse(localStorage.getItem(jsonFormData));
    console.log(localObj);
  });
 </script>

Answer 1

您缺少用于禁用提交功能的“ e.preventDefault（）”功能。

Answer 2

以HTML格式

   <button type="submit" name="button" id="button">Submit</button>

在脚本中

$("#form").submit(function(){
    var jsonForm = $("#form").serializeJSON();
    var jsonFormString = JSON.stringify(jsonForm);
    localStorage.setItem('jsonFormData', JSON.stringify(jsonForm));        
});

在otherpage.jsp脚本

中

$(document).ready(function(){   
    var localObj = JSON.parse(localStorage.getItem('jsonFormData')); 
    console.log(localObj);  
    alert(localObj.field1);
});

示例Codepen

将表单数据以JSON格式发送到另一个页面

2 个答案: