精华内容
下载资源
问答
  • vue和jQuery嵌套实现异步ajax通信// 可以兼容jQuery和vue的单一入口window.onload = function(){var app = new Vue({el:"#app",// vue内置属性用来绑定事件methods:{get:function(){// 发送get请求$.ajax({// 指定...
    vue和jQuery嵌套实现异步ajax通信

    // 可以兼容jQuery和vue的单一入口

    window.onload = function(){

    var app = new Vue({

    el:"#app",

    // vue内置属性用来绑定事件

    methods:{

    get:function(){

    // 发送get请求

    $.ajax({

    // 指定请求方式

    type:"GET",

    // 网址,ajax.php特制的服务器端请求

    url:"http://192.168.1.238/ajax.php",

    // 数据格式,jsonp是一种跨域请求的格式

    dataType:"jsonp",

    // 回调函数

    jsonp:"callback",

    // 通信成功后,打印服务器端返回的数据

    success:function(msg){

    // alert(msg.text);

    // 使用jQuery实时渲染页面(改变div盒子)的内容

    $("#message").html("下午好,您已成功登录!")

    }

    });

    }

    展开全文
  • vuejQueryAjax写法

    2019-10-05 18:00:26
    AJAX 指的是异步 JavaScript XML(Asynchronous JavaScript and XML)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新...

    VUE

    vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护

    axios(不支持发送跨域的请求)
    • axios([options])
    send() {
    		axios({
    			method: 'get', //只能用get
    			url: 'user1.json',
    			}).then(res => { //参数可以重复
    			console.log(res.data);
    			}).catch(res => {
    				console.log(res);
    			})
    		},
    
    • axios.get(url[,options]);
      传参方式:
      1.通过url传参
      2.通过params选项传参
    Getsend() {
    			axios.get('server.php', {
    				params: {
    					name: 'tom',
    					age: '24',
    				}
    			}).then(re => {
    				console.log(re.data);
    			}).catch(re => {
    				console.log("失败");
    			})
    		}
    
    • axios.post(url,data,[options]);
    var vm = new Vue({
    	el: '#c',
    	methods: {
    		Postsend() {
    			axios.post('server.php', 'name=tom&age=20')//方法1,数据是死的
    				.then(res => {
    					console.log(res.data);
    				}).catch(res => {
    					console.log("错误");
    				})
    		}
    	}
    	});
    
    Postsend() {
    axios.post('server.php', this.user, { //需要this.user
    	transformRequest: [function(data, headers) {
    		let params = '';
    	    for (let index in data) {
    			params += index + '=' + data[index] + '&';
    		}
    		return params;
    	}]
    			}).then(resp => {
    	console.log(resp.data);
    }).catch(err => {
    	console.log('请求失败:' + err.status + ',' + err.statusText);
    	});
    }
    

    axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参
    传参方式:
    1.自己拼接为键值对
    2.使用transformRequest,在请求发送前将请求数据进行转换
    3.如果使用模块化开发,可以使用qs模块进行转换

    vue-resource(支持发送跨域的请求)

    使用this.$http发送请求

    • this.$http.get(url, [options])
    • this.$http.jsonp(url, [options])
    • this.$http.post(url, [body], [options])
    //360浏览器
    sendJ(){
    	this.$http.jsonp('https://sug.so.360.cn/suggest',{
    		params:{
    			word:'a'
    		},
    	}).then(res=>{
    		console.log(res.data.s)
    	})
    },
    
    sendJB(){
    	this.$http.jsonp('https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1465,21106,29074,29522,29518,29721,29568,29220',{
    		params:{
    			wd:'a'
    		},
    		jsonp:'cb',
    	}).then(res=>{
    		console.log(res.data);
    	})
    }
    

    jQuery

    jQuery load() 方法是简单但强大的 AJAX 方法。
    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

    $(selector).load(URL,data,callback);
    

    HTTP GET 请求从服务器上请求数据。
    可选的 callback 参数是请求成功后所执行的函数名。

    $.get(URL,callback);
    

    HTTP POST 请求向服务器提交数据。

    $.post(URL,data,callback);
    
    展开全文
  •  <title>vue和jQuery嵌套实现异步ajax通信  <script src="../js/jquery.min.js">  <script src="../js/vue.js">    // 可以兼容jQuery和vue的单一入口  window.onload = function(){  var app = new Vue({  ...

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>vue和jQuery嵌套实现异步ajax通信</title>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/vue.js"></script>
        <script>
            // 可以兼容jQuery和vue的单一入口
            window.onload = function(){
                var app = new Vue({
                    el:"#app",
                    // vue内置属性用来绑定事件
                    methods:{
                        get:function(){
                            // 发送get请求
                            $.ajax({
                                // 指定请求方式
                                type:"GET",
                                // 网址,ajax.php特制的服务器端请求
                                url:"http://192.168.1.238/ajax.php",
                                // 数据格式,jsonp是一种跨域请求的格式
                                dataType:"jsonp",
                                // 回调函数
                                jsonp:"callback",
                                // 通信成功后,打印服务器端返回的数据
                                success:function(msg){
                                    // alert(msg.text);

     

                                    // 使用jQuery实时渲染页面(改变div盒子)的内容
                                    $("#message").html("下午好,您已成功登录!")
                                }
                            });
                        }

     

     

    转载于:https://www.cnblogs.com/long-ke/p/10807696.html

    展开全文
  • 代码实现: 演示结果: 转载于:https://www.cnblogs.com/onerose/p/10103244.html

    代码实现:

    演示结果:

    转载于:https://www.cnblogs.com/onerose/p/10103244.html

    展开全文
  • Vue和jQuery对比

    2020-02-23 21:53:01
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“ 二、Vue基本介绍 Vue (读音 /vjuː/,类似于 ...
  • 引用Vue.js <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js">...利用jQuery Ajax INSER...
  • 总结web前端学习时遇到的问题 清除浮动的几种方法 ...CSS中 link @import 的区别 (1) link属于HTML标签,而@import是CSS提供的; (2) 页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加...
  • 还是旧项目的的优化需求 ...vue页面还是使用JQueryajax请求,这个是之前项目移植的,不要问为什么不用axios,我也不知道 所以并没有办法使用axios封装好的请求拦截器 有利条件: 1.在getUserInfo接口可以获取到token具体
  • jquery和vue发送ajax请求

    2021-04-13 12:13:32
    jquery发送ajax请求 <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> <script type="text/javascript"> $.ajax({ type: "GET",//请求方式 url: ...
  • 我们在写前端页面时可能需要对服务器返回的参数做多步处理,也就是第一个ajax请求到的参数,有可能会被另一...jqueryajax的链式操作 当然在jquery中也可以采用嵌套的方法来解决上面问题。代码如下 $.ajax({ url:...
  • 公司表格渲染用的jqueryTable,然而我想用vue做数据绑定,通过jqueryTable做css样式。所以有了下边的故事… ...当然了大佬们都不建议jquery和vue一起用,所以…这篇文章很low 首先附上完成代码,具体请看注释 <...
  • 原生JS、jQuery和VUE中的Ajax比较

    千次阅读 2019-01-02 21:23:29
    Ajax:不刷新浏览器的情况下加载数据 1.原生JS中的Ajax function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new ...
  • vue.js和jqueryajax结合

    千次阅读 2018-08-16 17:36:15
    jsp页面: <div id="app"> {{message }}<br> <button v-on:click="showData">测试jquery加载数据</button> <table border="1"> <tr v-for="data in datas"> ...
  • 1. 引入jquery和vue.js [removed][removed] [removed][removed] 2. JS [removed] $(function(){ vm = new Vue({ el:'#lst',
  • 一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录。 ...但是ajax方法并不能通过后台直接跳转。 所以我们可以写一个ajax全局方法,...以下是引用jQueryajax全局方法: $.ajaxSetup(...
  • mock在vue和jquery中的使用,以及json5小知识点 一、mock在jquery中的运用 原理:监听拦截住ajax请求,返回mock处理后的数据。 使用示例: 目录结构: 首先在index.html中引入jquery和mcok <!DOCTYPE html>...
  • jqueryajax和vue的axios的区别 jqueryajax对老版本浏览器的兼容性更好, axios对返回数据封装得更好,对新版本的浏览器性能优化更好
  •  //第一种:jquery ajax  //beforeCreate: function () {  // var url = "/Home/Vue_Data";  // var _self = this;  // $.get(url, function (data) {  // _self.Students = JSON.parse(data);  // })  ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 623
精华内容 249
关键字:

vue和jqueryajax

vue 订阅