ajax 完整实例相关知识
-
jQuery Ajax 实例 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一、$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data , success: success , dataType: dataType}); 二、$.ajax的参数描述
-
PHP+AJAX实现简单验证码程序实例最新PHP+AJAX实现简单验证码程序实例以下是三零网为大家整理的最新PHP+AJAX实现简单验证码程序实例的文章,希望大家能够喜欢!这是一个项目中用到的。。。分享大家看看吧!vcode.php<?php session_start();//开启session功能 header("Cache-Control: no-cache, must-revalidate");$im = imagecreate(60,30);//定义图片宽度和高度 $vcode=getVCode();//获取要显示的字符 $bg = imagecolorallocate($im, 255, 255, 255);//定义图片背景 $txt = imagecolorallocate($im, rand(0,255), rand(0,255), rand(0,255));//定义要显示字符的颜色 imagestring($im, 8
-
AJAX ASP/PHP 请求实例AJAX ASP/PHP 请求实例·Previous Page·Next PageAJAX 用于创造动态性更强的应用程序。AJAX ASP/PHP 实例下面的例子将为您演示当用户在输入框中键入字符时,网页如何与 web 服务器进行通信:请在下面的输入框中键入字母(A - Z):窗体顶端姓氏:窗体底端建议:亲自试一下源代码实例解释 - showHint() 函数当用户在上面的输入框中键入字符时,会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发:function showHint(str){var xmlhttp;if (str.length==0){document.getElementById("txtHint
-
SSH+jquery+ajax奇葩整合近期学习了SSH2(Struts2+Spring+Hibernate)的整合后,开始尝试的写一个登陆界面,结果发现:若是单单使用struts2来进行页面跳转的话页面的效果不怎么样,同时也无法进行局部刷新(即异步提交验证)。于是,我开始在网上搜索解决的办法,有些说通过一个隐藏的iframe来达到效果,当我总觉得麻烦和不实用。后来问了下老师,告诉了我使用ajax可以达到想要的效果,我又发现网上有很多例子都是ajax的,但缺少的就是SSH2(整合好的)和ajax 的整合(ajax使用了jQuery框架)。说说我想要的效果:登录页面点击提交后 进行后台的验证;验证成功跳转到index.Jsp;验证失败则在本登录页面执行一个jQuery脚本提示用户; 需要的包:SSH2使用到的包外,还需要struts2的以下包: commons-beanutils-1.8.0.jarcommons-collections-3.1.jarcommons-fileupload-1.3.1.ja
ajax 完整实例相关课程
ajax 完整实例相关教程
- Ajax 前后端交互例子 前面的章节,我们主要从什么是 Ajax、为什么要用 Ajax、Ajax 是如何实现的以及如何封装一个 Ajax来对 Ajax 做一个多方位的学习。从前面章节的学习中,相信同学们对 Ajax 都会有一个比较完整的概念了。那么,接下来的这个章节,我们着重列举一个示例,来讲述 Ajax 是如何进行前后端交互的。
- 实现 ajax function ajax(options) { const { url, method, data, params, success, error } = options; const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { // readyState为4的时候已接收完毕 if (xhr.readyState === 4) { // 状态码200表示成功 if (xhr.status === 200) { console.log(xhr.responseText); success.call(this, xhr.responseText); } else { console.log(xhr.status); error.call(this, xhr.status) } } }; // get 请求 if (method === 'get' || method === 'GET') { if (typeof params === 'object') { // params拆解成字符串 params = Object.keys(params).map(function (key) { return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]); }).join('&'); } url = params ? `${url}?${params}` : url; xhr.open(method, url, true); xhr.send(); } // post 请求 if (method === 'post' || method === 'POST') { xhr.open(method, url, true); xhr.setRequestHeader("Content-type", "application/json; charset=utf-8"); xhr.send(JSON.stringify(params)); }}使用 promise 进行封装function ajax(url, method, params) { return new Promise((resolve, reject) => { // 创建XMLHttpRequest对象 const xhr = new XMLHttpRequest(); // 状态改变时的回调 xhr.onreadystatechange = function () { // readyState为4的时候已接收完毕 if (xhr.readyState === 4) { // 状态码200表示成功 if (xhr.status === 200) { resolve(xhr.responseText); } else { reject(xhr.status); } } }; // ... });}
- 3. SeekBar 完整示例 以上就是 SeekBar 常用的属性和 API 及回调的用法,接下来我们一起通过刚刚学习的知识实现一个简单功能。首先添加一个 SeekBar 并为其添加回调接口实时监听进度变化,然后通过将进度展示到 TextView 上,完整的布局代码如下:<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <SeekBar android:id="@+id/seekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:max="100" android:progress="60" android:progressDrawable="@drawable/seekbar_progress" /></RelativeLayout>在以上布局中我们在屏幕中央添加了一个 SeekBar 并在其下方添加了一个 TextView 用来展示 SeekBar 当前的进度。接着编写 Java 代码,主要完成两个任务:获取 SeekBar 的实例注册 SeekBar 的状态监听器,实时监控 SeekBar 的进度变化并通过 Toast 打印当前进度package com.emercy.myapplication;import android.app.Activity;import android.os.Bundle;import android.widget.SeekBar;import android.widget.Toast;public class MainActivity extends Activity { private SeekBar seekBar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); seekBar = findViewById(R.id.seekBar); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { Toast.makeText(MainActivity.this, "当前进度为 : " + progress, Toast.LENGTH_LONG).show(); } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) { } }); }}通过 Toast 观察,我们在拖拽的同时,可以实时监听到 SeekBar 的状态,效果图如下:
- 4. 完整示例代码 通过以上针对每个类型 Menu 的讲解,大家对菜单的创建和使用应该都比较清楚了,下面我们通过一个完整的示例来演示一下 3 种菜单的使用。
- 1.jQuery Ajax 这个技术在前面章节有独立章节进行讲解。事实上,$.ajax 是基于原生 XMLHttpRequest 进行了封装,并且提供了一套高度统一的设计和编程接口。在我们的代码中,我们一般都这样写:$.ajax({ method: 'POST', url: url, data: data, success: function () {}, error: function () {}});或者结合 deferred 的写法:$.ajax({ url: url, method: 'GET', data : data}).done(data => { // code}).fail(err => { // code})不吹不黑,jQuery 提供的这一套 Ajax 工具方法真的非常优秀,并且经历了这么多年的打磨,其稳定性、成熟度自然不必多言。关于 jQuery 的 Ajax 工具方法的优点,在前面章节已经讲过。至少从使用体验上来讲,简单易用,功能齐全,以至于我身边至今依然有很多开发者在使用这一套工具函数。然而,随着技术的发展,jQuery 也逐步走向一个衰弱的过程。越来越多的前端开发者开始使用诸如 Angular、React 和 Vue 这样的新型框架。想像一下,如果我们在一个基本用不到 jQuery 的技术中进行前端开发,为了要使用 jQuery 的 Ajax 相关方法而强行引入整个 jQuery,这显然是不现实也不可取的。在更新的技术中,我们将寻求体积更小,更为先进的类库。
- 3.$.ajax 事实上, load 属于基于 $.ajax 再次封装的一个简易的 API 。有兴趣的同学可以去扣一下源码来看看。大概实现就是这样:jQuery.fn.load = function( url, params, callback ) { var selector, type, response, self = this, off = url.indexOf( " " ); // xxx // If we have elements to modify, make the request if ( self.length > 0 ) { jQuery.ajax( { // xxx } ).done( function( responseText ) { // xxx } ).always( callback && function( jqXHR, status ) { // xxx } ); } return this;};这里我隐去了一些具体实现,目的只是为了说明 load 内部的基本实现是怎么样的即可。对具体实现有兴趣的同学可以自行读一下源代码。事实上,load 的定制化相对较高,必定无法满足更为灵活的需求。因此,我们多数时候会使用 jQuery 封装好的更为底层的 API —— $.ajax。
ajax 完整实例相关搜索
-
ajax
android
a href
abap
abap开发
abort
absolutelayout
abstractmethoderror
abstracttablemodel
accept
access
access教程
accordion
accumulate
acess
action
actionform
actionlistener
activity
addeventlistener