JS通过Ajax调用后台接口并处理返回字符串的方法

作者:慢半拍

时间:2026-10-22

浏览:577

本文介绍如何在JavaScript中使用Ajax向后台发送POST请求,并处理非标准JSON格式的字符串返回结果。通过示例展示了前端输入校验、后台数据查询及字符串拼接返回的全过程,重点讲解了如何解析后台返回的自定义字符串格式并绑定至前端控件。

文章目录

需求背景与场景描述

以往在开发中,常通过JavaScript获取后台生成的JSON字符串,并用于填充下拉选择框。本次需求有所不同,需要重新实现数据获取逻辑。

具体场景为:在文本输入框中输入用户名,系统需校验该值是否为空以及用户是否存在。若用户存在,后台将返回若干字段数据,前端接收后需将这些数据绑定至其他文本输入框中。

以下是具体的代码实现部分。

前端HTML与JavaScript实现

HTML页面结构如下:


<code class="language-html"><input type="text" id="iusername" runat="server" onblur="tbox_click()"/> 
<input id="inadd" runat="server" type="text" /> 
<input id="intel" runat="server" type="text" /></code> 

前端JavaScript逻辑如下:


<script>
  function tbox_click() {
   var cc = document.getElementById("iusername").value;
   var jsonob = {tbname:cc};
   $.ajax({
    type: "Post",
    url: "tc.aspx/Tbclick",
    contentType: "application/json; charset=utf-8",
    dataType: "text",
    data: JSON.stringify(jsonob),
    success: function (data) {
     var a = eval("(" + data + ")");
     var al = a.d;
     if (al == "namenull") {
      alert("The user name does not exist. Please re-enter it(该用户名不存在,请重新输入)");
      return;
     }
     if (al == "null") {
      alert("Please input OBTUsername(请输入用户名)");
      return;
     }
     //alert(a.d);
     var myd = new Array();
     myd = a.d.split("|");
     $("#intel").val(myd[0]);
     $("#inadd").val(myd[1]);
    },
    error: function (e) {
     alert(e.message);
    }
   });
  }
 </script>

后台接口处理逻辑

后台C#代码处理如下:


[WebMethod]
  public static string Tbclick(string tbname)
  {
   if (tbname.Trim() == "")
   {
    return "null";
   }
   var user = new User(tbname.Trim());//这个是根据tbname从数据库中获取信息的方法,可以自行填写
   if (user.userName == null)
   {
    return "namenull";
   }
   string jsonText = user.mobile+"|"+user.address;
 
   return jsonText;
  }

前后端数据格式差异分析

此处需重点说明与以往做法的区别。之前的接口返回的是已处理好的JSON格式字符串,而本次接口返回的是普通字符串,因此前端解析方式有所不同。以往的处理方式通常直接解析JSON对象。


var aa = eval("(" + data.d + ")");
alert(aa);

本次的处理方式调整为:先解析返回的字符串,再根据分隔符提取具体字段。


var a = eval("(" + data + ")");
alert(a.d);

这一差异导致问题排查耗时较长,最终确认是返回数据格式不同所致。

上述内容即为关于JS使用Ajax传值给后台并处理返回字符串的完整方法,希望能对读者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章