<!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("下午好，您已成功登录！")
                            }
                        });
                    }

vue和jQuery嵌套实现异步ajax通信的更多相关文章

  1. 采用jquery同django实现ajax通信

    在网页访问中通过HTTP协议中的get/post文件发送数据或请求.在浏览器中输入url后,浏览器就会帮助我们完成请求的发送和返回,并刷新更新界面.但是,如果我们不想更新界面,仅仅是发送一个get/p ...

  2. jQuery中带有异步Ajax代码的执行顺序

    1.问题 ​ 在使用jQuery的时候想通过Ajax请求来放所需要的html代码中放值,但是请求回来却是空的,源代码如下: $("a").click(function() { // ...

  3. 异步Ajax

    Ajax异步刷新应用在Web开发中经常用到,在过去WebForm中通常是使用JQuery和一般处理程序或者aspx页面来实现: 在MVC中,虽然依然可以使用一般处理程序,但是一般还是通过在Contro ...

  4. jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法

    2017年5月9日19:25:02 在做在线签名的时候,到了图片上传的时候,使用jquery异步ajax上传base64的图片数据的时候,使用默认的方式进行数据传输偶尔会出现 生产的图片只有上半部分, ...

  5. [译]脱离jQuery，使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  6. 利用jquery.form实现异步上传文件

    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...

  7. JQuery（三）-- AJAX的深入理解以及JQuery的使用

    HTTP HTTP http: 超文本传输协议.特点:  简单.快速.灵活.无状态.无连接 URL: 统一资源定位符. 组成:协议名://主机IP:端口号/项目资源地址?传递参数的键值对#锚点 ①ip ...

  8. jQuery deferred应用之ajax详细源码分析（二）

    在上一节中,我只贴出了$.Deferred的源码分析,并没用讲解怎么使用它,现在我们先看看$.ajax是如何使用它,让我们进行异步任务的处理. 如果没看上节的代码,请先稍微了解一下jQuery Def ...

  9. [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...

随机推荐

  1. Failed to execute 'write' on 'Document'动态载入的js不能执行write

    统计代码一般都是直接一个标签,插入js,标签放在哪里,统计图表就放在哪里! 我现在是稍微改了一下,我自己加了一点js,在页面所有元素都加载完成之后我再动态的把统计js插入到我需要的地方. 统计代码的s ...

  2. [原创]Modbus协议学习笔记

    一.参考资料 1.老罗传奇的2篇博文,写的不错,通俗易懂.链接地址为:http://www.cnblogs.com/luomingui/tag/Modbus/ 2.阿莫论坛精华资料:http://ww ...

  3. Elasticsearch学习笔记——常用命令

    1.创建一个名字为index的topic curl -XPUT http://localhost:9200/index 2.创建一个mapping curl -XPOST http://localho ...

  4. IT观察】网络通信、图片显示、数据库操作……Android程序员如何利用开源框架

    每个Android 程序员都不是Android应用开发之路上孤军奋战的一个人,GitHub上浩如烟海的开源框架或类库就是前人为我们发明的轮子,有的轮子能提高软件性能,而有的轮子似乎是以牺牲性能为代价换 ...

  5. js复制文本内容到剪贴板

    记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...

  6. Java API获取consumer group最新提交位移的时间

    碰到了有人问起这个问题,目前java consumer没有利用OffsetAndMetadata中的metadata字段记录提交的时间,故直接通过java consumer来查询是不行,我们需要直接读 ...

  7. solr搜索分词优化

    solr服务器配置好在搜索时经常会搜出无关内容,把不该分的词给分了,导致客户找不到自己需要的内容,那么我们就从配置词典入手解决这个问题. 首先需要知道自带的词典含义: 停止词:停止词是无功能意义的词, ...

  8. 解决FAT32格式U盘安装win10时0x8007000D错误

    问题由来 我一直使用U盘,UltraISO软碟通和msdn原版镜像来装系统.最近在把Win10 1709升级为1803时遇到了问题.同样也是使用UltraISO刻录镜像到U盘的方法安装的,这次从U盘启 ...

  9. proxy_set_header Host 所引发的凶案

    背景介绍:新搭建了一套测试环境.slb为2.2.2.2,由于应用的特殊性,需要走 test.aaa.com.cn 域名,而该域名在老的测试服务器1.1.1.1有两个不能迁移的服务也在使用,故想出对策, ...

  10. Vue中axios踩坑之路-POST传参

    https://blog.csdn.net/call_me_fly/article/details/79012581