URLSearchParams调用append报错：PHP分页AJAX页码提交失败

场景说明 #

开发带分页功能的PHP页面，流程为：提交表单后，点击页码更新页面指定区域。

相关代码 #

表单代码 #

<form class="row g-3" name="search" id="search" method="POST" action="">
    <div class="row g-3 align-items-center">
      <div class="col-sm-3"><label for="departmentSer" class="col-form-label">Select Department:</label></div>
      <div class="col-sm-8">
        <select class="form-select" name="departmentSer" id="departmentSer" aria-label="Default select example">
          <option>Choose1</option>
          <option>Choose2</option>
          <option>Choose3</option>
        </select>
      </div>
      <div class="col-sm-3">
        <button type="submit" class="btn btn-primary" id="lddeptSecSub" name="lddeptSecSub" value="lddeptSearch" onclick="submitFormSea(this.value, 'departmentSer')">Get List</button>
      </div>
    </div>
</form>

AJAX结果更新区域 #

<div class="align-items-center mt-4" id="formShowData" name="formShowData"> </div>

分页链接格式 #

<a class="page-link" href="?areac=lddeptSearch&amp;place=Choose...&amp;dsource=listData&amp;page=1" onclick="submitClick(this)">1</a>

jQuery代码 #

function jajax_qview(datas, field) {
  var request = $.ajax({
    url: "ajax_areac.php",
    method: "POST",
    data: datas,
    cache: false,
    dataType: "html",
  });

  request.done(function( msg ) {
      $('#'+field).html(msg);
  });
 
  request.fail(function( jqXHR, textStatus ) {
    console.log(datas);
    alert( "Request failed: " + textStatus );
  });
  
  request.always(function() {
    datas = undefined;
  });
}

function submitForm(formNameS, elemIdVal) {
  event.preventDefault();
  var datas = {areac:formNameS, place : $('#'+elemIdVal).val()};

  jajax_qview(datas, 'formS');
}

function submitClick(submitLinkVars) {
  event.preventDefault();
  var searchParams = new URLSearchParams(submitLinkVars.search);
  var datas = searchParams;
  jajax_qview(datas, 'formS');
}

当前问题 #

submitForm函数运行正常，但点击页码触发submitClick函数时，出现错误：

Uncaught TypeError: 'append' called on an object that does not implement interface URLSearchParams

此时生成的datas变量为：

URLSearchParams(4) { areac → "lddeptSearch", place → "7", dsource → "listData", page → "2" }

尝试添加AJAX参数processData: false,contentType: false,时，AJAX未向PHP文件提交数据；设置dataType: "json"时，出现Request failed: parsererror错误。

解决方案 #

问题核心是jQuery的$.ajax无法直接处理URLSearchParams对象（尤其是低版本jQuery），需将其转换为jQuery兼容的格式，以下两种方案均可：

方案1：转换为普通键值对对象 #

修改submitClick函数，把URLSearchParams转为普通JavaScript对象：

function submitClick(submitLinkVars) {
  event.preventDefault();
  var searchParams = new URLSearchParams(submitLinkVars.search);
  // 将URLSearchParams转为普通对象
  var datas = Object.fromEntries(searchParams.entries());
  // 注意：原代码中更新目标是'formS'，但结果区域id为formShowData，这里统一修正为实际区域id
  jajax_qview(datas, 'formShowData');
}

方案2：转换为查询字符串 #

直接将URLSearchParams转为标准查询字符串，jQuery会自动解析处理：

function submitClick(submitLinkVars) {
  event.preventDefault();
  var searchParams = new URLSearchParams(submitLinkVars.search);
  // 转为查询字符串格式
  var datas = searchParams.toString();
  jajax_qview(datas, 'formShowData');
}

额外修正 #

原submitForm函数中更新的目标是'formS'，但实际结果区域的id是formShowData，建议同步修改该函数的目标参数，避免表单提交后无法更新内容：

function submitForm(formNameS, elemIdVal) {
  event.preventDefault();
  var datas = {areac:formNameS, place : $('#'+elemIdVal).val()};
  jajax_qview(datas, 'formShowData');
}

内容的提问来源于stack exchange，提问作者Nilesh