GVKun编程网logo

Vue中使用Ajax与后台交互（vue+ajax）

18

在这里，我们将给大家分享关于Vue中使用Ajax与后台交互的知识，让您更了解vue+ajax的本质，同时也会涉及到如何更有效地.netAjax与后台一般处理程序(ashx)交互、Ajax()方法如何与

在这里，我们将给大家分享关于Vue中使用Ajax与后台交互的知识，让您更了解vue+ajax的本质，同时也会涉及到如何更有效地.net Ajax与后台一般处理程序(ashx) 交互、Ajax () 方法如何与后台交互、Ajax 的jquery与后台交互实现无刷新效果、Ajax()与后台交互使用详解的内容。

本文目录一览：

Vue中使用Ajax与后台交互（vue+ajax）

Vue中使用Ajax与后台交互（vue+ajax）

一、下载依赖包

npm install --save axios

二、封装 ajax 请求模块

2.1 api/ajax.js

/*
ajax 请求函数模块
 */
import axios from ''axios''

export default function ajax (url = '''', data = {}, type = ''GET'') {
  return new Promise(function (resolve, reject) {
    let promise

    if (type === ''GET'') {
      let dataStr = ''''
      Object.keys(data).forEach(key => {
        dataStr += key + ''='' + data[key] + ''&''
      })
      if (dataStr !== '''') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf(''&''))
        url = url + ''?'' + dataStr
      }
      promise = axios.get(url)
    } else {
      promise = axios.post(url, data)
    }

    promise.then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}

2.2 api/index.js

/*
与后台交互模块
 */
import ajax from ''./ajax''

/**
 * 根据经纬度获取位置详情
 */
export const reqAddress = geohash => ajax(''/api/position/'' + geohash)

/**
 * 获取食品分类列表
 */
export const reqCategorys = () => ajax(''/api/index_category'')

/**
 * 根据经纬度获取商铺列表
 */
export const reqShops = ({longitude, latitude}) => ajax(''/api/shops/'', {longitude, latitude})

/**
 * 获取一次性验证码
 */
export const reqCaptcha = geohash => ajax(''/api/position/'' + geohash)

/**
 * 用户名密码登陆
 */
export const reqPwdLogin = (name, pwd, captcha) => ajax(''/api/login_pwd'', {name, pwd, captcha}, ''POST'')

/**
 * 发送短信验证码
 */
export const reqSendCode = phone => ajax(''/api/sendcode'' + {phone})

/**
 * 手机号验证码登陆
 */
export const reqSmsLogin = (phone, code) => ajax(''/api/logon_sms/'', {phone, code}, ''POST'')

/**
 * 根据会话获取用户信息
 */
export const reqUser = () => ajax(''/api/userinfo'')

/**
 * 用户登出
 */
export const reqLogout = () => ajax(''/api/logout'')

三、配置代理

proxyTable: {
    ''/api'': { // 匹配所有以 ''/api'' 开头的请求路径
        target: ''http://localhost:4000'', // 代理目标的基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径：去掉路径中开头的''/api''
            ''^/api'': ''''
        }
    }
}

 

.net Ajax与后台一般处理程序(ashx) 交互

.net Ajax与后台一般处理程序(ashx) 交互

本文主要实现无动态刷新查询后台数据功能，主要用到ajax+ashx+sqlserver进行交互.

首先需要引用Jquery:

<script language="javascript" type="text/javascript" src="../js/jquery.js">

html脚本：

<asp:TextBox ID="tb_corpName" runat="server" MaxLength="100" Width="369px"></asp:TextBox>

前台通过一个事件来调用ashx：

复制代码 
<script type="text/javascript">
    $(function () {
        $("#tb_corpName").blur(function () {        　　 //鼠标失去焦点事件
            var corpName = $("#tb_corpName").val();     
            $.ajax({        
                type: "post",                           //提交方式     
                url: "/ashx/FZGpyShowData.ashx",        //一般处理程序的路径
                data: { corpName: corpName },           //向后台传入的值
                dataType: "json",                       //返回值格式
                success: function (data) {              //返回成功后将要做的事，这里是返回一个表
                    $("#tb_CreditCode").val(data[0].CreditCode);    
                    $("#tb_corpCode").val(data[0].CorpCode);
                    $("#tb_linkTel").val(data[0].LinkPhone);

                    $("#corpProvince option[text=''" + data[0].StateName + "'']").attr("selected", true);
                    showCity();
                    $("#corpCity option[text=''" + data[0].AdminAreaName + "'']").attr("selected", true); 

                    $("#tb_address").val(data[0].Address);
                    $("#tb_linkMan").val(data[0].LinkMan);
                    $("#tb_Mobile").val(data[0].LinkMobile);
                }
            });
        })
    })
</script>
复制代码

后台来接收前台传过来的值，对其进行操作：

复制代码 
　　　　public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string corpName = context.Request["corpName"].Trim().ToString();　　　　　　//接收前台传过来的参数
            if (corpName != "")
            {
                string sql = @"select top 1 CorpName,CreditCode,CorpCode,LinkPhone,StateName,AdminAreaName,LinkMan,LinkMobile,Address from tbProductOrder as a 
                                        inner join tbStateDic as b on a.StateNum = b.StateNum
                                        inner join tbAdminAreaClass on a.CityNum = AdminAreaClassID
                                        where CorpName =@CorpName order by CorpName";
                SqlParameter[] par = new SqlParameter[1];
                par[0] = new SqlParameter("@CorpName", corpName);
                DataSet ds = DBHerpler.Load(sql, par); 
                string json = SerializerHelper.ToJsonString(ds.Tables[0]);　　　　//返回json类型的数据
                context.Response.Write(json);　　　　　　　　　　　　　　　　　　　　　　
                context.Response.End(); 
            } 
        }
复制代码

SerializerHelper类的定义：

 

复制代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.IO;
using System.Xml.Serialization;
using Newtonsoft.Json;

/// <summary>
/// SerializerHelper 的摘要说明
/// </summary>
public static class SerializerHelper
{
    /// <summary>
    /// 反序列化XML文件
    /// </summary>
    public static T LoadFromXmlFile<T>(string filepath) where T : class
    {
        using (FileStream stream = new FileStream(filepath, FileMode.Open, FileAccess.Read))
        {
            XmlSerializer serializer = new XmlSerializer(typeof(T));
            return (T)serializer.Deserialize(stream);
        }
    }

    /// <summary>
    /// 反序列化XML字符串
    /// </summary>
    public static T LoadFromXmlString<T>(string xml) where T : class
    {
        XmlSerializer serializer = new XmlSerializer(typeof(T));
        byte[] bytes = Encoding.UTF8.GetBytes(xml);

        using (MemoryStream stream = new MemoryStream(bytes))
        {
            return (T)serializer.Deserialize(stream);
        }
    }

    /// <summary>
    /// 序列化XML对象
    /// </summary>
    public static string SaveToXmlString<T>(T entity) where T : class
    {
        using (MemoryStream stream = new MemoryStream())
        {
            XmlSerializer serializer = new XmlSerializer(typeof(T));
            serializer.Serialize(stream, entity);
            return Encoding.UTF8.GetString(stream.ToArray());
        }
    }

    /// <summary>
    /// 序列化Json对象
    /// </summary>
    public static string ToJsonString(object obj)
    {
        return ToJsonString<object>(obj);
    }

    /// <summary>
    /// 序列化Json对象
    /// </summary>
    public static string ToJsonString<T>(T obj) where T : class
    {
        string text = JsonConvert.SerializeObject(obj);
        return text;
    }

    /// <summary>
    /// 反序列化Json字符串
    /// </summary>
    public static T ToJsonObject<T>(string text) where T : class
    {
        T obj = (T)JsonConvert.DeserializeObject(text, typeof(T));
        return obj;
    }
}
复制代码

 

如果向后台传入多个参数在data里面用逗号分割可写多个参数：

　　　　data: { corpName: corpName ， corpName2: corpName2} 

Ajax () 方法如何与后台交互

Ajax () 方法如何与后台交互

Ajax 全称为 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 技术是目前在浏览器中通过 JavaScript 脚本可以使用的所有技术的集合

Ajax 全称为 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax 技术是目前在浏览器中通过 JavaScript 脚本可以使用的所有技术的集合。Ajax 以一种崭新的方式来使用所有的这些技术，使得古老的 B/S 方式的 Web 开发焕发了新的活力。

ajax () 方法是 jQuery 底层的 ajax 实现，通过 HTTP 请求加载远程数据。

$.ajax({

type: "GET",

url: "handleAjaxRequest.action",

data: {paramKey:paramValue},

async: true,

dataType:"json",

success: function(returnedData) {

alert(returnedData);

//请求成功后的回调函数

//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；

//根据返回的数据进行业务处理

},

error: function(e) {

alert(e);

//请求失败时调用此函数

}

});

}

　　type: 请求方式，“POST” 或者 “GET”, 默认为 “GET”。　　参数说明:

　　url: 发送请求的地址。

　　data: 要向服务器传递的数据，已 key:value 的形式书写（id:1）。GET 请求会附加到 url 后面。

　　async: 默认 true, 为异步请求，设置为 false, 则为同步请求。

　　dataType: 预期服务器返回的数据类型，可以不指定。有 xml、html、text 等。

　　在开发中，使用以上参数已可以满足基本需求。

　　如果需要向服务器传递中文参数，可将参数写在 url 后面，用 encodeURI 编码就可以了。

var chinese = "中文";

var urlTemp = "handleAjaxRequest.action?chinese="+chinese;

var url = encodeURI(urlTemp);//进行编码

$.ajax({

type: "GET",

url: url,//直接写编码后的url

success: function(returnedData) {

alert(returnedData);

//请求成功后的回调函数

//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；

//根据返回的数据进行业务处理

},

error: function(e) {

alert(e);

//请求失败时调用此函数

}

});

}


　　struts2 的 action 对请求进行处理：

 

public void handleAjaxRequest() {

HttpServletRequest request = ServletActionContext.getRequest();

HttpServletResponse response = ServletActionContext.getResponse();

//设置返回数据为html文本格式

response.setContentType("text/html;charset=utf-");

response.setHeader("pragma", "no-cache");

response.setHeader("cache-control", "no-cache");

PrintWriter out =null;

try {

String chinese = request.getParameter("chinese");

//参数值是中文，需要进行转换

chinese = new String(chinese.getBytes("ISO--"),"utf-");

System.out.println("chinese is : "+chinese);

//业务处理

String resultData = "hello world";

out = response.getWriter();

out.write(resultData);

//如果返回json数据，response.setContentType("application/json;charset=utf-");

//Gson gson = new Gson();

//String result = gson.toJson(resultData);//用Gson将数据转换为json格式

//out.write(result);

out.flush();

}catch(Exception e) {

e.printStackTrace();

}finally {

if(out != null) {

out.close();

}

}

}


　struts.xml 配置文件：不需要写返回类型

<action name="handleAjaxRequest" class="com.test.TestAction"

method="handleAjaxRequest">

</action>


注：ajax 通过 async 参数决定是异步还是同步，false 同步，true 异步；分享 AJAX 前后台交互方法

　　异步执行顺序是先执行后续动作，再执行 success 里代码；

　　同步是先执行 success 里代码，再执行后续代码；

验证：同步时数据量大是否会卡顿？例如从后台搜索大量数据时，页面是否卡死？

1、(异步) 方法调用，后续代码不需要等待它的执行结果

　　后台 <C#>:

using System.Web.Script.Services;

public static string GetStr(string str1, string str2) 

{

return str1 + str2;

}


前台 <JQuery>:

function Test(strMsg1,strMsg2)

{

$.ajax({

type: "Post",

url: "Demo.aspx/GetStr",

async: true,

//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 

data: "{''str1'':''"+strMsg1+"'',''str2'':''"+strMsg2+"''}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(data) {

//返回的数据用data.d获取内容

alert(data.d);

},

error: function(err) {

alert(err);

}

});

　　//隐藏加载动画

$("#pageloading").hide();

}


　　后台 <C#>:2、(同步) 方法调用，可用于需要得到返回值是执行后续代码的前提

using System.Web.Script.Services;

public static string GetStr(string str1, string str2) 

{

return str1 + str2;

}


前台 <JQuery>:

function Test(strMsg1,strMsg2)

{

　var str = “”;

$.ajax({

type: "Post",

url: "Demo.aspx/GetStr",

async: false,

//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 

data: "{''str1'':''"+strMsg1+"'',''str2'':''"+strMsg2+"''}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function(data) {

//返回的数据用data.d获取内容

str = data.d;

},

error: function(err) {

alert(err);

}

});

　return str;

 

Ajax 的jquery与后台交互实现无刷新效果

Ajax 的jquery与后台交互实现无刷新效果

总结

以上是小编为你收集整理的Ajax 的jquery与后台交互实现无刷新效果全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

Ajax()与后台交互使用详解

Ajax()与后台交互使用详解

这次给大家带来Ajax()与后台交互使用详解，Ajax()与后台交互使用的注意事项有哪些，下面就是实战案例，一起来看一下。

Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合

Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合。Ajax以一种崭新的方式来使用所有的这些技术，使得古老的B/S方式的Web开发焕发了新的活力。

ajax()方法是jQuery底层的ajax实现，通过HTTP请求加载远程数据。

$.ajax({
type: "GET",
url: "handleAjaxRequest.action",
data: {paramKey:paramValue},
async: true,
dataType:"json",
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}
登录后复制

　　参数说明:

　　type:请求方式，“POST”或者“GET”,默认为“GET”。

　　url:发送请求的地址。

　　data:要向服务器传递的数据，已key:value的形式书写（id:1）。GET请求会附加到url后面。

　　async:默认true,为异步请求，设置为false,则为同步请求。

　　dataType:预期服务器返回的数据类型,可以不指定。有xml、html、text等。

　　在开发中，使用以上参数已可以满足基本需求。

　　如果需要向服务器传递中文参数，可将参数写在url后面，用encodeURI编码就可以了。

var chinese = "中文";
var urlTemp = "handleAjaxRequest.action?chinese="+chinese;
var url = encodeURI(urlTemp);//进行编码
$.ajax({
type: "GET",
url: url,//直接写编码后的url
success: function(returnedData) {
alert(returnedData);
//请求成功后的回调函数
//returnedData--由服务器返回，并根据 dataType 参数进行处理后的数据；
//根据返回的数据进行业务处理
},
error: function(e) {
alert(e);
//请求失败时调用此函数
}
});
}
登录后复制

　　struts2的action对请求进行处理：

public void handleAjaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//设置返回数据为html文本格式
response.setContentType("text/html;charset=utf-");
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
PrintWriter out =null;
try {
String chinese = request.getParameter("chinese");
//参数值是中文，需要进行转换
chinese = new String(chinese.getBytes("ISO--"),"utf-");
System.out.println("chinese is : "+chinese);
//业务处理
String resultData = "hello world";
out = response.getWriter();
out.write(resultData);
//如果返回json数据，response.setContentType("application/json;charset=utf-");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);//用Gson将数据转换为json格式
//out.write(result);
out.flush();
}catch(Exception e) {
e.printStackTrace();
}finally {
if(out != null) {
out.close();
}
}
}
登录后复制

　　struts.xml配置文件：不需要写返回类型

<action method="handleAjaxRequest"></action>
登录后复制

分享AJAX前后台交互方法

注：ajax通过async参数决定是异步还是同步,false同步,true异步;

　　异步执行顺序是先执行后续动作，再执行success里代码;

　　同步是先执行success里代码，再执行后续代码;

验证：同步时数据量大是否会卡顿？例如从后台搜索大量数据时，页面是否卡死？

1、(异步)方法调用，后续代码不需要等待它的执行结果

　　后台:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}
登录后复制
登录后复制

前台:

function Test(strMsg1,strMsg2) 
{
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: true,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 
data: "{''str1'':''"+strMsg1+"'',''str2'':''"+strMsg2+"''}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 
alert(data.d);
},
error: function(err) {
alert(err);
}
});
　　//隐藏加载动画
$("#pageloading").hide();
}
登录后复制

2、(同步)方法调用，可用于需要得到返回值是执行后续代码的前提

　　后台:

using System.Web.Script.Services; 
public static string GetStr(string str1, string str2) 
{ 
return str1 + str2; 
}
登录后复制
登录后复制

前台:

function Test(strMsg1,strMsg2) 
{
　var str = “”;
$.ajax({
type: "Post",
url: "Demo.aspx/GetStr",
async: false,
//方法传参的写法一定要对，与后台一致，区分大小写，不能为数组等，str1为形参的名字,str2为第二个形参的名字 
data: "{''str1'':''"+strMsg1+"'',''str2'':''"+strMsg2+"''}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 
str = data.d;
},
error: function(err) {
alert(err);
}
});
　return str;
登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax实现跨域访问三种方法总结

ajax跨域问题完美解决方法

以上就是Ajax()与后台交互使用详解的详细内容，更多请关注php中文网其它相关文章！

我们今天的关于Vue中使用Ajax与后台交互和vue+ajax的分享就到这里，谢谢您的阅读，如果想了解更多关于.net Ajax与后台一般处理程序(ashx) 交互、Ajax () 方法如何与后台交互、Ajax 的jquery与后台交互实现无刷新效果、Ajax()与后台交互使用详解的相关信息，可以在本站进行搜索。

本文标签：

上一篇（转）javascript中为何在匿名function函数后面还外加一个括号（js的function匿名函数）

下一篇jQuery操作Ajax（jquery操作页面）

相关文章