详情页

jquery ajax提交数据到后端,返回处理

时间:2023年10月23日

编辑:佚名

客户的需求
点击提交按钮后,将指定input框的数据ajax发送到后端
如果返回成功边将指定input框的信息修改为返回的json里的text字段
如果失败,则修改指定input框的信息为抱歉
实现代码
$("#submit-btn").click(function() {
  // 获取指定 input 元素的值
  var inputVal = $("#your-input").val();
  // 使用 Ajax 发送数据到后端
  $.ajax({
    url: "your_api_url",
    type: "POST",
    data: {inputVal: inputVal},
    dataType: "json",
    success: function(response) {
      // 当请求成功时,更新指定 input 的值为返回的 JSON 数据中的 text 字段
      $("#your-input").val(response.text);
    },
    error: function(xhr, status, error) {
      // 当请求失败时,修改指定 input 的值为 "抱歉"
      $("#your-input").val("抱歉");
    }
  });
});
在上述代码中,#submit-btn 为提交按钮的 ID,#your-input 为要发送数据的指定 input 元素的 ID。在点击提交按钮后,使用 .val() 方法获取指定 input 元素的值,并将其作为数据发送到后端。在 success 回调函数中,使用 response.text 来获取 JSON 数据中的 text 字段,并使用 .val() 方法将其设置为指定 input 元素的值。在 error 回调函数中,将指定 input 元素的值设置为 “抱歉”。
当然,您需要将 your_api_url 替换为您自己的实际值,并将 #your-input 替换为您要发送数据的 input 元素的 ID。
相关文章
猜你需要