Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。它是一种构建网站的强大方法。

使用ajax需要以下几点

//编辑一个输入框   再加上一个onclick事件

<div class="row">
<div class="col-md-12" style="margin-top: 15px;">
<p style="margin-left: 35px; margin-top: 20px;">
<input type="text" id="quzhi" name="name" placeholder="请输入需要传递的数值" style="width: 300px; height: 40px;" />
</p>
<p style="margin-left: 80px; margin-top: 30px;">
<input type="button" class="form-control" value="登 陆" onclick="DengLu()" style="width: 200px; height: 30px;" />
</p>
</div>

</div>

//输入后内容后 点击onclick上传按钮
//点击后会触发下面的ajax方法进行取值 传输
<script src="../Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
function DengLu() {
debugger;
//先取值
var quzhi= $("#quzhi").val();
//判断渠道的值是否为空 为空则弹窗 提示数值不可为空
if (quzhi== undefined || quzhi== "" ) {
return swal({
title: "值不可为空", //弹出框的title
type: "warning", //弹出框类型
showCancelButton: false,//是否显示取消按钮
confirmButtonColor: "#DD6B55", //确定按钮颜色
confirmButtonText: "确定",//确定按钮上面的文档
closeOnConfirm: true
});
} //使用AJAX将取到的值传入后台验证
$.ajax(
{
type: "POST",
url: "stkj.ashx?action=fangfa", //后台文件名为stkj。aspx 文件里的方法名字叫fangfa
data:{ quzhi: quzhi },//需要传送的数值
contentType: "application/x-www-form-urlencoded",
dataType: "json",
async: false, // 同步或异步
cache: false,
success: function (data) {
// 后台返回值 成功则提示成功
if (data.state) {
swal({
title: data.msg, //弹出框的title
type: "success", //弹出框类型
showCancelButton: false,//是否显示取消按钮
timer: ,
}, function (isConfirm) {
window.location.href = data.url;
}); }
//不成功则提示失败
else {
swal({
title: data.msg, //弹出框的title
type: "warning", //淡出框类型
showCancelButtun: false,//是否显示取消按钮
confirmButtonColor: "#DD6B55",//确定按钮颜色
confirmButtonText: "确定", //确定按钮上面的文档
closeOnConfirm: true,
timer: ,
},
function (isConfirm) {
window.location.href = data.url;
}
);
}
},
//异常时跳出的提示框信息
error: function () {
return swal({
title: "登陆异常", //弹出框的title
type: "warning", //弹出框类型
showCancelButton: false,//是否显示取消按钮
confirmButtonColor: "#DD6B55", //确定按钮颜色
confirmButtonText: "确定",//确定按钮上面的文档
closeOnConfirm: true
});
}
}) } </script>

ajax 样式的更多相关文章

  1. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  2. ThinkPHP5杂技(二)

    不要使用数据库查询嵌套 if (!$listA = Db::name('coin') ->field('id,symbol') ->where('id', 'IN', logic('All ...

  3. JAVA web 框架集合

    “框架”犹如滔滔江水连绵不绝, 知道有它就好,先掌握自己工作和主流的框架: 在研究好用和新框架. 主流框架教程分享在Java帮帮-免费资源网 其他教程需要时间制作,会陆续分享!!! 152款框架,你还 ...

  4. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  5. Ajax编程中,经常要能动态的改变界面元素的样式

    在Ajax编程中,经常要能动态的改变界面元素的样式,可以通过对象的style属性来改变,比如要改变背景色为红色,可以这样写:element.style.backgroundColor=”#ff0000 ...

  6. JS常用方法(获取Class、获取元素样式、事件监听、cookie、ajax等)

    var Util = {}; Util.byClass = function (oClass) {//全局获取 var tags = document.all ? document.all : doc ...

  7. 自己实现的数据表格控件(dataTable),支持自定义样式和标题数据、ajax等各种自定义设置以及分页自定义

    一.前言 也没什么好说的嘛,用了蛮多github上开源的能够实现dataTable功能的表格插件,不过都默认绑定样式啊,数据格式也设定的比较死,所以忍不住自己实现了一个简单的可自定义样式和自定义数据返 ...

  8. Jquery qTip2实现多种提示效果,支持ajax,以及多种样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. datatables 配套bootstrap样式使用小结(2) ajax篇

    距离上一篇有点时间了,周末做了伴郎参加了一个土豪同学的婚礼. 上一篇是介绍一下基本的用法,基本的原理是取出所有的数据,然后调用$.datatables(option)方法格式化,这种方法显然不太科学, ...

随机推荐

  1. 深度学习-CNN+RNN笔记

    以下叙述只是简单的叙述,CNN+RNN(LSTM,GRU)的应用相关文章还很多,而且研究的方向不仅仅是下文提到的1. CNN 特征提取,用于RNN语句生成图片标注.2. RNN特征提取用于CNN内容分 ...

  2. DS 图解快排

    快速排序是交换排序,是冒泡排序的改进版. 快排过程: 1.选定一个分界值     2.分成三个部分(小于分界部分,分界值,大于分界值部分)                       3.对于分开的两 ...

  3. 6. 运行Spark SQL CLI

    Spark SQL CLI可以很方便的在本地运行Hive元数据服务以及从命令行执行任务查询.需要注意的是,Spark SQL CLI不能与Thrift JDBC服务交互.在Spark目录下执行如下命令 ...

  4. Python 基础 while 循环

    Python 基础 while 循环 while 循环 在生活中,我们遇到过循环的事情吧?比如循环听歌.在程序中,也是存才的,这就是流程控制语句 while 基本循环 while 条件: # 循环体 ...

  5. ElasticSearch 调优

    来源:http://tinyurl.com/y4gnzbje 第一部分:调优索引速度 第二部分-调优搜索速度 英文原文:https://www.elastic.co/guide/en/elastics ...

  6. NET Core 3.0 AutoFac替换内置DI的新姿势

    原文:NET Core 3.0 AutoFac替换内置DI的新姿势 .NET Core 3.0 和 以往版本不同,替换AutoFac服务的方式有了一定的变化,在尝试着升级项目的时候出现了一些问题. 原 ...

  7. C# vb .net图像合成-合成星形

    在.net中,如何简单快捷地实现图像合成呢,比如合成文字,合成艺术字,多张图片叠加合成等等?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码 ...

  8. 浅谈分词算法基于字的分词方法(HMM)

    前言 在浅谈分词算法(1)分词中的基本问题我们讨论过基于词典的分词和基于字的分词两大类,在浅谈分词算法(2)基于词典的分词方法文中我们利用n-gram实现了基于词典的分词方法.在(1)中,我们也讨论了 ...

  9. Linux中解压、压缩 ZIP文件

    解压 unzip -o -d /home/v-gazh myfile.zip # 把myfile.zip文件解压到 /home/v-gazh/ # -o:不提示的情况下覆盖文件: # -d:-d /h ...

  10. 2019 房多多java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.房多多等公司offer,岗位是Java后端开发,因为发展原因最终选择去了房多多,入职一年时间了,也成为了面试官 ...