jquery ajax复习巩固-CFANZ编程社区

对象序列化成a=b&d=c

function serialize (obj) {
    let ary = []
    for (var p in obj)
      if (obj.hasOwnProperty(p) && obj[p]) {
        ary.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
      }
    return '?' + ary.join('&')
  }

ajax get请求

let params = {current:1,size:10}
$.ajax({
      type: "get",
      url: `/api/article/getById${serialize(params)}`,
      async: true,
      contentType: 'application/json',
      dataType: 'JSON',
      success: function (res) {
        let temp = res.data;
        
      },
      error: function (data) {
        console.log("error:" + data.responseText);
      }
    });

标题form表单 ajax post请求

 <form id="formInfo">
          <div class="formBox" style="margin-top:20px;">
            <div class="inputBox">
              <div style="display:flex">
                <div style="color:red;width:20px;">*</div>
                <div style="width:calc(100% - 20px)" class="inputBox">
                  <input type="text" id="name" name="name" placeholder="姓名">
                </div>
              </div>
              <span class="tipInfo"></span>
            </div>
            <div class="inputBox">
              <div style="display:flex">
                <div style="color:red;width:20px;">*</div>
                <div style="width:calc(100% - 20px)" class="inputBox">
                  <input type="text" id="company" name="company" placeholder="公司">
                </div>
              </div>
              <span class="tipInfo"></span>
            </div>
            <div class="inputBox">
              <div style="display:flex">
                <div style="color:red;width:20px;">*</div>
                <div style="width:calc(100% - 20px)" class="inputBox">
                  <input type="text" id="phone" name="phone" placeholder="电话">
                </div>
              </div>
              <span class="tipInfo"></span>
            </div>
            <div class="inputBox" style="padding-left: 20px;">
              <input type="text" id="proName" name="proName" placeholder="请输入你想咨询的项目">
              <span class="tipInfo"></span>
            </div>
            <div class="inputBox" style="height: 200px;">
              <div style="display:flex">
                <div style="color:red;width:20px;">*</div>
                <div style="width:calc(100% - 20px)"  class="inputBox">
                  <textarea rows="8" style="width:100%;resize: none;" id="applyInfo" name="applyInfo" placeholder="请输入申请信息" style="resize:none;"></textarea>
                </div>
              </div>
              <span class="tipInfo"></span>
            </div>
            <div class="submitBox" id="submitMessage" style="width:calc(100% - 20px);margin-left:20px;border-radius: 3px;height:50px;line-height: 50px;">
              提交
            </div>
          </div>
        </form>

form表单提交js

$.ajax({
      type: "post",
      url: "http://101.37.12.188:8082/api/consulter/save",
      async: true,
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify(params),//将对象转为json字符串
      success: function (res) {
        if (res.code == 200) {
        //清空input框
          $(':input', '#formInfo').not(':button,:submit,reset,:hidden').val('').removeAttr('checked').removeAttr('selected')
        }
      },
      error: function (data) {
        console.log("error:" + data.responseText);
      }
    });