jQ和ajax+Bootstrap

最新推荐文章于 2024-04-17 05:11:02 发布
最新推荐文章于 2024-04-17 05:11:02 发布
阅读量698 收藏 2
点赞数
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/herogxw4/article/details/88781716
版权

一、AJAX

1.jQuery和ajax
1.1load

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<button id="btn">按钮</button>
		<div id="box"></div>
		<script>
			/*
			 * 
			 * load(url,callback)
			 * 
			 * url:需要加载的资源，地址或者相对路径
			 * callback:加载完成之后的响应函数
			 * 
			 */
			
			/*$("#btn").click(function(){
				$("#box").load("red.html");
			})*/
			
			
			$("#btn").click(function(){
				//reponseText,status,XMLHttPRequst  加载到的数据，加载之后的状态，加载之后的信息
				//三个只是一个形参，可以是任意的标识符，默认参数会自动赋值
				$("#box").load("red.html",function(reponseText,status,XMLHttPRequst){
					console.log(reponseText);
					console.log(status);
					console.log(XMLHttPRequst);
				});
			})
			
			
		</script>
	</body>
</html>
1.2 . g e t ( ) 和 .get()和 .get()和.post()

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			<input type="text" id="username"  /><br />
			<input type="text" id="content"  /><br />
			<input type="button" id="btn"  value="提交" />
			<div id="responseText"></div>
		</form>
		
		<script>
			/*
			 * $.get(url,data,callback,type)
			 * urL:请求的服务器的地址
			 * data：发送给服务器的数据，通过key：value形式传递
			 * callback：请求成功之后的回调函数【服务器的响应数据】，回调函数中有默认参数
			 * type:预判服务器的数据类型，可写可不写，jQuery会自动判断
			 */
			$("#btn").click(function(){
				$.get("http://10.20.152.27/get1.php",{username:$("#username").val(),content:$("#content").val()},function(data,status){
					
					//$("#responseText").html(data);
					
					//解析json数据\
					//$jsonStr = json_encode($dataArray);  编码
					var result = JSON.parse(data);   //解码，得到的结果为一个数组
					
					/*
					 
					 * 
					 * if(!empty($_GET['username']) && !empty($_GET['content'])){
							$username = $_GET['username'];
							$content = $_GET['content'];
							$dataArray = array("username"=>$username,"content"=>$content);
							$jsonStr = json_encode($dataArray);
							echo $jsonStr;
	}
					 * */
					
					//获取数组中的字段，数组对象.字段名
					$("#responseText").html("用户名：" + result.username + "内容：" + result.content);
					
				});
			})
			
			/*
			 */
			
			
		</script>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			<input type="text" id="username"  /><br />
			<input type="text" id="content"  /><br />
			<input type="button" id="btn"  value="提交" />
			<div id="responseText"></div>
		</form>
		
		<script>
			/*
			 * $.post(url,data,callback,type)
			 * urL:请求的服务器的地址
			 * data：发送给服务器的数据，通过key：value形式传递
			 * callback：请求成功之后的回调函数【服务器的响应数据】，回调函数中有默认参数
			 * type:预判服务器的数据类型，可写可不写，jQuery会自动判断
			 */
			$("#btn").click(function(){
				$.post("http://10.20.152.27/post1.php",{username:$("#username").val(),content:$("#content").val()},function(data,status){
					
					
					var result = JSON.parse(data);  
					

					$("#responseText").html("用户名：" + result.username + "内容：" + result.content);
					
				});
			})
				
		</script>
	</body>
</html>
1.3$.getScript()

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<button id="btn">修改</button>
		<div id="box"></div>
		
		<script>
			
			/*
			 * getScript(url,callback)，在操作html的同时出发加载js文件的操作，提高工作效率
			 * 
			 * 类似于load（）
			 * 
			 * 如果加载外部的js文件，一般有两种用法：
			 * 	a.先加载js文件，然后再使用
			 * 	b.先加载html标签，后再加载js文件【js中操作了html标签】
			 */
			$("#btn").click(function(){
				$.getScript("js/alert.js",function(){
					$("#btn").click(function(){
						$("#box").css("background-color","blue");
					})
				})
			})
				
		</script>
	</body>
</html>
1.4$.ajax()

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			<input type="text" id="username"  /><br />
			<input type="text" id="content"  /><br />
			<input type="button" id="btn"  value="提交" />
			<div id="responseText"></div>
		</form>
		<script>
			/*
			 * $.ajax()综合了get和post的功能
			 * 
			 * $.ajax(options)
			 * 	options:请求设置，格式为key:value的形式，既可以发送请求，也可以接受服务器返回的操作
			 * 	包括请求方式，请求的服务器的地址，发送的数据，请求你成功之后的回调函数
			 * 
			 */
			
			$(function(){
				
				$("#btn").click(function(){
					
					
					$.ajax({
						type:"post",
						url:"http://10.20.152.27/post1.php",
						data:{username:$("#username").val(),content:$("#content").val()},
						success:function(data,status){
							
							var result = JSON.parse(data);   //解码，得到的结果为一个数组
					
					
							//获取数组中的字段，数组对象.字段名
							$("#responseText").html("用户名：" + result.username + "内容：" + result.content);
									
						}
					});
				})
			})
		</script>
	</body>
</html>

二、Bootstrap

1.基础使用

代码演示：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>重置浏览器大小查效果。</p>
  <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
  </div>
</div>


</body>
</html>
2.栅格系统【网格系统】

代码演示：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>重置浏览器大小查效果。</p>
  <p> 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版。</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
  </div>
</div>

</body>
</html>
爱讲笑话的霸王龙
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ+bootstrap仿微博编辑页面
10-25
【JQ+bootstrap仿微博编辑页面】是一种利用jQuery（简称JQ）和Bootstrap框架构建的类似于微博的编辑界面。这个项目旨在提供一个功能丰富的、具有响应式设计的用户交互体验，让用户能够在各种设备上轻松地编写和编辑...
HTML+CSS+JS+JQ+Bootstrap的礼品精品网店网页.7z
最新发布
06-28
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架...
BootStrap 和JQuery 实现分页效果
vengu733的博客
07-22 1470
BootStrap 和JQuery 实现分页效果 基于Ajax 实现前后端分离 ，分别在两个服务器进行数据交互 ，前端框架BootStrap ,简端脚本框架JQuery 。 后端用servlet简单获取数据库数据 ，利用filter过滤器实现跨域请求。主要功能有 分页、多选框选择 新增 批量删除 更新 单个删除 分页： 多选：当前页面选择编号 为全选，下面选框都会打钩，取消全选，下面选框全不选，下面选框选满满多选会自动勾选，反之不选。 更新 ：点击更新显示用户基本信息，编号无法改变。 后端sevl
Ajax的实例以及bootstrap的使用
weixin_67235801的博客
05-04 3581
省市联动与分页面板
Bootstrap进度条与AJAX后端数据传递结合使用_bootstrap进度条怎么和后端交互的(1)
2401_83947353的博客
04-17 221
控制器Controller。
前端学习1——Bootstrap jquery ajax
互联网
01-29 231
0.前言 前些时间顺着Yeelink学习了RESTFUL，使用PHP和Slim框架尝试实现简单的REST API，树莓派可通过GET方法获得JSON数据包，通过这种方式实现了树莓派和服务器（我的PC）的互动。但是由于没有WEB前端，所以只能使用cURL工具或直接修改数据库的方式改变LED状态，体验非常差。 REST API入门体验可参考 【PHP再学习4—— slim框架学习和使...
使用Ajax实现省市联动&&Bootstrap的基本使用
weixin_65975275的博客
05-05 471
Ajax系列之省市联动&&bootstrap
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
最后，Bootstrap是一个流行的开源前端框架，它提供了预设的CSS样式和组件，加速了响应式网页开发。Bootstrap包括网格系统、导航条、模态框、下拉菜单等组件，以及可自定义的主题。在webdemo-master中，Bootstrap的...
基于python+flask构建的大型区块链论坛项目，前端html+css+bootstrap框架+js+jq+ajax
06-23
前端html+css+bootstrap框架+js+jq+ajax,前端弹窗用的是sweetalert2，注册界面短信验证码调用的是阿里大鱼短信接口，图形验证码是用 python中PIL图形处理工具画的，验证码缓存是用的memcache,用celery+redis来异步...
HTML+CSS+JS+JQ+Bootstrap的健身时间机构网页.7z
06-28
探索全栈前端技术的魅力：HTML+CSS+JS+JQ+Bootstrap网站源码深度解析 在这个数字化时代，构建一个既美观又功能强大的网站成为了许多开发者和企业追逐的目标。本份资源精心汇集了一套完整网站源码，融合了HTML的骨架...
JQuery验证框架jqBootstrapValidation.zip
07-19
jqBootstrapValidation 是一个 JQuery 验证框架，用来引导表单。根据用户类型，它可在 help-block 元素中显示出引导错误。
python+MySQL+bootstrap+ajax实例项目
05-08
一个小型的用户管理系统，适合初学者参考使用，代码绝对好用，如有疑问可联系qq956701085
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
08-30
主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下
ajax+bootstrap的常用小组件
ss123mlk的博客
06-05 202
200：正常 404:访问的资源不存在 （访问地址输入错误/真的资源没了） 403：没有请求权限 500:服务器代码错了 jquery的资源首先要导入 <script src="路径"/> -<input type=" " name=" " value=" " id=" " >name是可以和服务器代码对应 id是在jsp中被其他的调用 value是在页面显示的时候 $("#XX")获取指定id的对象 比如input标签等 alert("HTML: " + $("#test"
bootstrap+jquery+ajax跨域实现一个聊天机器人
冷月心的博客
02-14 2076
bootstrap+jquery+ajax跨域实现一个聊天机器人
java ajax实现增删改查,03.bootstrap+Ajax+SSM(maven搭建)实现增删改查
weixin_42114645的博客
03-13 712
功能点：分页数据校验ajaxRest风格的URI：使用HTTP协议请求方式的动词，来表示对资源的操作(GET(查询)，POST(新增)，PUT(修改)，DELETE(删除))技术点基础框架-ssm数据库mysql前端框架-bootstrap项目依赖 -Maven分页 -pagehelper逆向工程-Mybatis Generator实现效果添加按钮弹出模态框编辑按钮弹出模态框删除基础环境搭建1)新...
bootstrap+jquery+ajax跨域实现短信验证码登录
冷月心的博客
02-15 2825
bootstrap+jquery+ajax跨域实现短信验证码登录
bootstrap table通过ajax获取后台数据展示在table
热门推荐
提笔写忧伤
08-26 4万+
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json，但是为了解决跨域问题我们需要将dataType改为jsonp，这时就需要修改bootstrap table获取后台数据的方式，采用$('#table').bootstrapTable('load', data);方法。修改前和修改后代码分别如下所示。 2.修改前代码 <table id="t
bootstrap+jq+jsp表格行内编辑不弹窗
05-05
Bootstrap和jQuery都提供了许多方便的表格编辑插件，其中一些包括弹出窗口进行编辑。但是，如果您想要实现行内编辑并且不需要弹出窗口，则可以考虑使用以下方法： 1. 使用HTML5的contenteditable属性：将表格单元格的contenteditable属性设置为true，使其可编辑。然后，使用jQuery来处理编辑的内容并将其发送到服务器进行保存。 2. 使用jQuery插件：有许多jQuery插件可用于实现行内编辑，如Jeditable、Editable、X-editable等。这些插件允许您将表格单元格转换为可编辑区域，并且在单元格内编辑文本时，会自动将更改保存到服务器。 3. 使用JSP和AJAX：使用JSP和AJAX可以轻松地实现行内编辑。您可以使用JSP来生成表格，并使用jQuery和AJAX将表格数据发送到服务器进行保存。 无论您选择哪种方法，都需要考虑以下问题： 1. 数据验证：确保用户输入的数据符合要求，并且可以在服务器端进行验证。 2. 数据保存：将编辑后的数据保存到服务器端数据库中。 3. 用户反馈：提供适当的反馈，以便用户知道他们的更改是否已成功保存。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值