form 避免 action 触发的页面跳转

原创

十月ooOO 2022-06-30 11:34:37 ©著作权

©著作权归作者所有：来自51CTO博客作者十月ooOO的原创作品，请联系作者获取转载授权，否则将追究法律责任

Form 提交不换页面 action = url

前提
提交表单后，后台返回的是一个html地址，也就是一个html文件

<form id="search" action="/portal/" method="post" >
    <input type="text" name="username"/>
    <input type="password" name="password"/>
    <a class="btn" onclick=search(1)>提交</a>
</form>

JS 本来是这样的，这样会跳转页面

function search(page){
  $("#search").attr("action","/portal/");
  $("#search").submit();
}

现在要求是不跳转页面，试过iframe不行，因为页面内部有文件引用。最后改用ajax，且最好实现后后台不需要做出任何改变。

function search(page){
  
  $.ajax({

    // ajax 请求的url
    url: "/portal/",

    // 向服务器改善的数据
    data: function () {
        // 为了调试方便，用了function
        // 数据形式是这样的: "username=&password="
      formData = $('#search').serialize();
      return formData;
        },

    // 服务器返回的数据类型
    dataType: 'html',

    // 请求成功后要做的
    success: function (resultData) {
        // resultData 是服务器返回的 html 形式的数据
      // <div><h1> 这是返回的 html 数据</h1></div>
      $('#content').html(resultData);
        },

    // 请求出错后要做的
    error: function (xhr) {
      console.log(xhr);
        }

  });
}