PhoneGap中Ajax POST请求URL异常：页面URL附加至目标接口地址

首先，咱们先揪出最常见的问题根源：你的#submit按钮大概率是嵌套在<form>标签里的，点击时不仅触发了写好的Ajax逻辑，还触发了表单的默认提交行为——如果表单没指定action属性，浏览器就会把当前页面的URL当作提交目标，这就会让你产生“页面URL附加到目标URL后”的错觉（实际是同时触发了Ajax请求和表单默认提交请求，看起来像是URL被拼接了）。

第一步：阻止表单默认提交行为 #

修改点击事件处理代码，添加event.preventDefault()来打断默认行为：

$(document).ready(function(){
  $('#submit').click(function(event){
    // 阻止按钮的默认表单提交行为
    event.preventDefault();
    $.ajax({
      url:"http://localhost:8080/rest/user/",
      type:'post',
      data : { "id": 4, "firstname": "Max", "lastname": "Mustermann" },
      dataType: 'JSON',
      success: function(res, status){
        // 补充成功回调的处理逻辑
        console.log("请求成功：", res);
      },
      error: function(xhr, status, error){
        // 新增错误日志，方便排查问题
        console.error("请求出错：", status, error);
        console.error("服务器响应：", xhr.responseText);
      }
    });
  });
});

第二步：适配RESTful服务的JSON请求格式 #

你的后端是RESTful服务，通常期望接收JSON格式的请求体，但jQuery的$.ajax默认会把data里的对象转成application/x-www-form-urlencoded格式（类似id=4&firstname=Max），这可能导致后端解析异常，进而引发后续的页面跳转问题。你需要手动指定请求内容类型，并把数据转成JSON字符串：

$(document).ready(function(){
  $('#submit').click(function(event){
    event.preventDefault();
    const postData = { "id": 4, "firstname": "Max", "lastname": "Mustermann" };
    $.ajax({
      url:"http://localhost:8080/rest/user/",
      type:'post',
      data : JSON.stringify(postData), // 将对象转为JSON字符串
      contentType: "application/json", // 指定请求内容为JSON格式
      dataType: 'JSON',
      success: function(res, status){
        console.log("请求成功：", res);
      },
      error: function(xhr, status, error){
        console.error("请求出错：", status, error);
        console.error("服务器响应：", xhr.responseText);
      }
    });
  });
});

第三步：处理PhoneGap的跨域与本地协议限制 #

PhoneGap的WebView加载的是本地file://协议的页面，向http://localhost发起请求属于跨域请求，需要做两个配置：

• 后端服务开启CORS（跨域资源共享）：在响应头添加Access-Control-Allow-Origin: *（开发阶段可以临时用通配符，生产环境再限制具体域名）。
• 在PhoneGap的config.xml中添加域名访问权限：

<access origin="http://localhost:8080/*" />
<allow-navigation href="http://localhost:8080/*" />

第四步：验证请求URL的正确性 #

如果以上步骤都没解决问题，可以在Ajax的beforeSend回调里打印最终请求URL，确认是否真的被拼接：

beforeSend: function(xhr){
  console.log("实际请求URL：", this.url);
}

如果打印的URL确实异常，可能是jQuery在file://协议下对绝对URL的解析bug，你可以尝试用原生XMLHttpRequest发起请求来规避：

$('#submit').click(function(event){
  event.preventDefault();
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://localhost:8080/rest/user/', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      const res = JSON.parse(xhr.responseText);
      console.log("请求成功：", res);
    } else {
      console.error("请求出错：", xhr.statusText);
    }
  };
  xhr.onerror = function() {
    console.error("网络请求失败");
  };
  const postData = JSON.stringify({ "id": 4, "firstname": "Max", "lastname": "Mustermann" });
  xhr.send(postData);
});

按照这个顺序排查，应该能解决你的问题。

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