Question

我有这样的表格;

<div  id="employeeinfo" style="padding:40px" class="employee-body">
            <form id="employeeform"  title="" method="post">

            <label class="title">First Name</label>
            <input type="text" id="fname" name="first_name" >

            <label class="title">Last Name</label>
            <input type="text" id="lname" name="last_name" >

            <input type="submit" id="submitButton" onclick="formSubmit()" name="submitButton" value="Submit">

            </form>
        </div>

我有一个json网址：＆＃34; app.employee.com/employeedata"

我需要从html表单获取fname和lname并搜索上面url中的json并将其显示在

中到目前为止，我有这个：

<script type='text/javascript'>
          function formSubmit(){

            var formData = JSON.stringify($("#employeeform").serializeArray());

            $.ajax({
              type: "POST",
              url: "serverUrl",
              data: formData,
              success: function(){},
              dataType: "json",
              contentType : "application/json"
            });
          }

        </script>

如何处理？我在shopify中这样做。

Answer 1

您可以先使用getElementById方法。

function formSubmit(){
    ...
    var fname=document.getElementById("fname").value; 
    var lname=document.getElementById("lname").value; 
 }

Answer 2

在您的情况下，您的serializeArray仅会获取所有表单数据，并会返回

[
  {
    name: "fname",
    value: "zydexo"
  },
  {
    name: "lname",
    value: "test"
  }
]

然后在您的后端文件中，您可以阅读发布数据。如果您想要自己获取每个元素值，则需要使用：

var fname=document.getElementById("fname").value;
or
var fname=$('#fname').val();

然后

function formSubmit(){
        var fname= $("#fname").val();
        var lname= $("#lname").val();

        $.ajax({
          type: "POST",
          url: "serverUrl",
          data: {fname:fname,lname:lname},
          success: function(data){
           //
          },
          dataType: "json",
          contentType : "application/json"
        });
      }

Answer 3

试试这种方式

function formSubmit(){
 var fname=$('#fname').val();
 console.log('fname',fname);
 var lname=$('#lname').val();
 console.log('lname',lname);
}

Answer 4

success function调用中的ajax会从服务器返回数据：

<强>成功

类型：功能（任何数据，字符串textStatus，jqXHR jqXHR）   如果请求成功则调用的函数。该函数传递三个参数：从服务器返回的数据，根据dataType参数或dataFilter回调函数格式化（如果指定）;描述状态的字符串;和jqXHR（在jQuery 1.4.x，XMLHttpRequest）对象。从jQuery 1.5开始，成功设置可以接受一系列函数。每个函数将依次调用。这是一个Ajax事件。

来源：jQuery.ajax docs

所以你可以做的是：

<script type='text/javascript'>
  function formSubmit(){

    var formData = JSON.stringify($("#employeeform").serializeArray());

    $.ajax({
      type: "POST",
      url: "serverUrl",
      data: formData,
      success: function(responseData){
          // responseData contains the json from the server. You can search this for the firstname and lastname from the form.
      },
      dataType: "json",
      contentType : "application/json"
    });
  }

</script>

如何从HTML表单获取输入并查找数据？

4 个答案: