Jquery Ajax Json本地测试

Question

我有一个表单和一个api，但我不知道如何测试数据是否另存为json，有人能帮我吗？

<form id="reg-form" method="post" action="">
<div class="form-group">
    <label for="yourname">Please enter your name :</label>
    <input type="text" class="form-control" id="yourname" name="yourname" placeholder="Name" required>
</div>
<div class="form-group">
    <label for="surname">Please enter your surname :</label>
    <input type="text" class="form-control" id="surname" name="surname" placeholder="Name" required>
</div>
<div class="form-group">
    <label for="genderType">Gender</label>
    <div class="styledropdownwarp">
        <select class="form-control" name="genderType" id="genderType" required>
            <option value="">Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select>
    </div>
</div>

​

下面是我的api，我想在另一个url中发送这个表单数据，但首先我想在本地测试它，如果它工作，可能会将表单数据作为json发送到另一个页面或在控制台中查看它们。有什么想法吗？

console.log(document);
var form = document.getElementById("reg-form");

form.onsubmit = function (e) {

  e.preventDefault();

  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }
  addData();
}

function addData(){
 $.ajax({
         type: "POST",
         url: "http://192.168.100.11:8443/v1/captive-portal/device-registration",
         data: JSON.stringify(data),
         contentType: "application/json; charset=utf-8",
         crossDomain: true,
         dataType: "json",
         success: function (data, status, jqXHR) {

             alert(success);
         },

         error: function (jqXHR, status) {
             // error handler
             console.log(jqXHR);
             alert('fail' + status.code);
         }
      });
}

Answer 1

我相信你的需求是需要一些工具来测试你为构建应用程序而创建的API方法。您可以使用Postman来完成此操作。它是免费的，易于理解和使用。用于测试REST API。

也有一个适用于chrome的扩展。

Answer 2

jQuery方式

$("#reg-form").on("submit", function(event){
  event.preventDefault();
  // Check form data
  console.log($(this).serialize());
  // AJAX
  $.ajax({
    type: "POST",
    url: "http://192.168.100.11:8443/v1/captive-portal/device-registration",
    data: $(this).serialize(),
    contentType: "application/json; charset=utf-8",
    crossDomain: true,
    dataType: "json",
    success: function (data, status, jqXHR) {
         alert(success);
     },

     error: function (jqXHR, status) {
         // error handler
         console.log(jqXHR);
         alert('fail' + status.code);
     }
  });

})；

你的方式

只需将data设置为全局变量

console.log(document);
var form = document.getElementById("reg-form");

// Data as a global variable
var data = {};

form.onsubmit = function (e) {
  e.preventDefault();

  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }
  addData();
}

function addData(){
 // Check data
 console.log(JSON.stringify(data));
 // AJAX
 $.ajax({
     type: "POST",
     url: "http://192.168.100.11:8443/v1/captive-portal/device-registration",
     data: JSON.stringify(data),
     contentType: "application/json; charset=utf-8",
     crossDomain: true,
     dataType: "json",
     success: function (data, status, jqXHR) {

         alert(success);
     },

     error: function (jqXHR, status) {
         // error handler
         console.log(jqXHR);
         alert('fail' + status.code);
     }
  });
}