jquery应用 php和html交互

最新推荐文章于 2022-06-06 23:14:51 发布
最新推荐文章于 2022-06-06 23:14:51 发布
阅读量551 收藏 1
点赞数
分类专栏： HTTP 文章标签： jquery应用 php html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012307430/article/details/48975033
版权

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

php服务端和html数据交互。主要应用jquery库。

主要html body代码如下：

<body>
<h2 class="titleup">boss message</h2>
<ul id="userlist">
	<li><a href="#" rel="1">刘董事</a></li>
	<li><a href="#" rel="2">张董事</a></li>
	<li><a href="#" rel="3">立董事</a></li>
	<li><a href="#" rel="4">行董事</a></li>
	<li><a href="#" rel="5">海董事</a></li>
</ul>
<div class="part1">
	<p>姓名：<span id="name"></span></p>
	<p>性别：<span id="sex"></span></p>
	<p>电话：<span id="tel"></span></p>
	<p>邮箱: <span id="email"></span></p>
</div>
<h2 class="titleup">emplpyees message</h2>
<div class="part2">
	<ul id="userlist1">
		<li><a href="#" rel="1">路人甲</a></li>
		<li><a href="#" rel="2">路人乙</a></li>
		<li><a href="#" rel="3">路人丙</a></li>
		<li><a href="#" rel="4">路人丁</a></li>
		<li><a href="#" rel="5">路人戊</a></li>
	</ul>
	<div class="msg">
	<p>姓名：<span id="name"></span></p>
	<p>性别：<span id="sex"></span></p>
	<p>电话：<span id="tel"></span></p>
	<p>邮箱: <span id="email"></span></p>
</div>
</div>
</body>
head  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="jquery.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){ 
    $("#userlist a").bind("click",function(){ 
    	// $(".part1").hide();
        var hol = $(this).attr("rel"); 
        var data = "action=getlink&id="+hol; 
        // alert(data);
        $.getJSON("bossinfo.php",data, function(json){ 
        	// alert(json);
            $("#name").html(json.name); 
            $("#sex").html(json.sex); 
            $("#tel").html(json.tel); 
            $("#email").html(json.email);
       }); 
       // $("#userlist a").bind('click',function() {
       // 		$(".info").slideDown('slow');
       // 	/* Act on the event */
       // }); 
    	$(".part1").toggle('slow');
    }); 
});
</script>
<script type="text/javascript">
	$(document).ready(function(){ 
    $(".part2 #userlist1 a").bind("click",function(){ 
    	// $(".part1").hide();
        var hol = $(this).attr("rel"); 
        var data = "action=getinfo&id="+hol; 
        // alert(data);
        $.getJSON("bossinfo.php",data, function(json){ 
        	// alert(json);
            $(".msg #name").html(json.name); 
            $(".msg #sex").html(json.sex); 
            $(".msg #tel").html(json.tel); 
            $(".msg #email").html(json.email);
       }); 
       // $("#userlist a").bind('click',function() {
       // 		$(".info").slideDown('slow');
       // 	/* Act on the event */
       // }); 
    	$(".msg").toggle('slow');
    }); 
});
</script>
</head>
jquery.css
<pre name="code" class="html">@charset "utf-8";
/* CSS Document */
	.part1{
		margin: 5px;
		border: solid 1px #c3c3c3;
		background: #A5A552;
		clear: left;
		padding: 6px;
		display: none;
	}
	.msg{
		margin: 5px;
		border: solid 1px #c3c3c3;
		background: #A5A552;
		clear: left;
		padding: 6px;
		display: none;
	}
	.titleup{
		margin: 5px;
		border: solid 1px #c3c3c3;
		background: #00DB00;
		text-align: center;
		padding: 6px;
	}
	p{
		line-height: 24px;
	}
	p span{
		font-weight: bold;
	}
	#userlist{margin:4px; height:42px} 
	#userlist li{float:left; width:80px; line-height:42px; height:42px; font-size:18px;  
font-weight:bold} 
	#userlist1{margin:4px; height:42px} 
	#userlist1 li{float:left; width:80px; line-height:42px; height:42px; font-size:18px;  
font-weight:bold} 
	body{
		height: 800px;
		width: 1000px;
		border: solid 1px 	#000079;
	}


 php代码如下： 

 

 

<?php 
	$con = mysql_connect("localhost","root","") or die("connect mysql failed! error:".mysql_error());
		mysql_select_db("my_db",$con);
	$action=$_GET['action']; 
	if ($action=="getlink") {
		$id=intval($_GET['id']); 
	// var_dump($action);
	//如何做保护需要查一下；
		$row = mysql_query("SELECT * FROM bossinfo WHERE id=$id");

		$result = mysql_fetch_array($row);
		mysql_close($con);
		$list = array('name'=>$result['name'],'sex'=>$result['sex'],'tel'=>$result['tel'],'email'=>$result['email']);
		echo json_encode($list);
	}elseif ($action == "getinfo") {
			$id=intval($_GET['id']); 
	// var_dump($action);
	//如何做保护需要查一下；
		$row = mysql_query("SELECT * FROM userinfo WHERE id=$id");

		$result = mysql_fetch_array($row);
		mysql_close($con);
		$list = array('name'=>$result['username'],'sex'=>$result['sex'],'tel'=>$result['tel'],'email'=>$result['email']);
		echo json_encode($list);
	}
	
 ?>
基本给出json数据html就可以接收到！ 

 

部分备注和注释可以帮助调试程序。
 

效果图如下：
 

点击后效果如下：
 


 
 


 
 


 
 
 


 

                

        

        

    




    

      

        

            

              
                
                  okzuhedu
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
【html+jquery（大概）】表单的获取和交互

				
			

			

				

					LinkBoundaryless的博客
				

				

					12-29
					
					401
					
				

			

		

		

			
				
jQuery表单交互
（虽然标题是这么写……但最后还是用dom实现的，不过jquery的知识也有用到）
先上效果图


以下代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
		<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    </he

			
		

	



                

              
                



	

		

			

				
					
构建实时Web应用（基于HTML5 WebSocket、PHP和jQuery）

				
			

			

				

					01-04
				

			

		

		

			
				
在现代Web开发中，实时通信...总的来说，HTML5 WebSocket、PHP和jQuery的组合提供了一种强大的工具集，用于创建具有实时交互性的Web应用。理解并熟练掌握这些技术，将使开发者能够构建出更高效、更具吸引力的用户体验。

			
		

	



                


  
              

                


	

		

			

				
					
jQuery HTML操作

				
			

			

				

					博客标题不能为空我也没办法
				

				

					02-18
					
					626
					
				

			

		

		

			
				
这一节主要是jQuery对html文件的一些操作，当初学html的时候就涉及过这一部分的知识，当然是用jsp来实现的，个人感觉这种对html文件的操作实在是意义不大，这类操作是对文档直接操作，尤其是那种添加或者删除某一段文档的效果，既然要修改，当初设计网页的时候直接改好了再放上去不就好了么，实在是有些鸡肋。
jQuery一个很强大的功能就是对DOM的操作，最常用的有三个：
①text()
设置或者返回所选元素的文本内容，如果只需要返回所选元素的文本内容，不需要填写任何参数，使用这个方法，返回的一定是文本内容

			
		

	





	

		

			

				
					
html页面交互元素,Js 和 JQuery 与HTML元素之间的交互

				
			

			

				

					weixin_42298100的博客
				

				

					06-04
					
					206
					
				

			

		

		

			
				
\最近在做毕设，一个简易的电商平台，前端处理时用PHP，Js。不是很清楚Js怎么控制HTML中的元素。整一下。JS DOM HTMLDOM ：Document Object Model(文档对象模型)DOM HTMLa) 改变 HTML 内容Hello World!document.getElementById("p1").innerHTML="New text!";Hello World!The...

			
		

	



		

			
		



	

		

			

				
					
PHP程序员必须要懂得的十个Jquery应用,收藏下

				
			

			

				

					liuzp111的专栏
				

				

					10-25
					
					485
					
				

			

		

		

			
				
应用一、在文本或密码输入时禁止空格键在很多表格领域都不需要空格键，例如，电子邮件，用户名，密码等等等。这里是一个简单的技巧可以用于在选定输入中禁止空格键。$('input.nospace').keydown(function(e) {
    if (e.keyCode == 32) {
        return false;
    }
});应用二、在图片上停留时逐渐增强或减弱的透明效果$(

			
		

	





	

		

			

				
					
前端HTML调用jQuery库，表单（前端：HTML搭配jQuery系列教程二）

				
			

			

				

					K_AAbb的博客
				

				

					05-16
					
					206
					
				

			

		

		

			
				
表单伪类选择器，指的是专门操作表单元素的一种伪类选择器。在jQuery中，常用的表单伪类选择器如下表所示：

1、伪类选择一：
代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <s

			
		

	





	

		

			

				
					
Jquery+ajax+php+mysql数据库实现用户注册登录

				
			

			

				

					04-06
				

			

		

		

			
				
在本项目中，"Jquery+ajax+php+mysql数据库实现用户注册登录"是一个典型的Web应用程序开发案例，它涵盖了前端交互、后端处理以及数据库管理等多个方面。以下将详细阐述这些知识点：  1. **Jquery**：Jquery是一个...

			
		

	





	

		

			

				
					
HTML+CSS+JS+PHP+Jquery 实现HUAWEI商城

					
最新发布

				
			

			

				

					07-25
				

			

		

		

			
				
在本项目中，“HTML+CSS+JS+PHP+Jquery 实现HUAWEI商城”是一个综合性的前端和后端开发实例，旨在帮助初学者掌握Web开发的基本技能。以下是各个技术在实现过程中所扮演的角色及相关的知识点：  1. **HTML（HyperText...

			
		

	





	

		

			

				
					
php+jquery(bootstrap)应用

				
			

			

				

					11-07
				

			

		

		

			
				
在IT领域，PHP和jQuery（通常与Bootstrap框架一起使用）是构建动态网页和交互式用户界面的常用技术。本文将深入探讨这些技术的基础知识及其在实际应用中的结合使用。  **PHP（Hypertext Preprocessor）** 是一种广泛...

			
		

	





	

		

			

				
					
基于php+mysql+html+jQuery 养老院网站的设计与制作（前台展示+后台管理）.zip

				
			

			

				

					03-17
				

			

		

		

			
				
它与HTML结合，可以实现数据的交互和页面的动态更新。PHP的优势在于其语法简洁，学习曲线平缓，且有丰富的开源库和框架可供选择，如PHPMailer用于发送邮件，PDO或mysqli用于数据库操作。在这个项目中，PHP主要用于...

			
		

	





	

		

			

				
					
jquery网页应用

				
			

			

				

					03-14
				

			

		

		

			
				
jquery资源，网页应用，网页js 网页特效

			
		

	





	

		

			

				
					
jQuery应用技巧大全

				
			

			

				

					11-07
				

			

		

		

			
				
jQuery应用技巧大全jQuery应用技巧大全

			
		

	





	

		

			

				
					
jQuery实现AJAX应用

				
			

			

				

					12-09
				

			

		

		

			
				
初学ajax的可以看看，Jquery实现AJAX
应用

			
		

	





	

		

			

				
					
jQuery的应用

				
			

			

				

					hongcaixia的博客
				

				

					04-20
					
					1678
					
				

			

		

		

			
				
jQuery的应用一、使用JQ完成首页的定时广告弹出1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】2.技术分析使用jQuery中的相关技术3.实现步骤
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数

			
		

	





	

		

			

				
					
html和jq怎么关联,jQuery实现html双向绑定功能示例

				
			

			

				

					weixin_35676939的博客
				

				

					06-08
					
					171
					
				

			

		

		

			
				
jQuery实现html双向绑定功能示例发布时间：2020-08-22 13:18:08来源：脚本之家阅读：174作者：IT小君本文实例讲述了jQuery实现html双向绑定功能。分享给大家供大家参考，具体如下：var user = new User('123');$(function(){user.set( "name", "99" );});function GetData() {alert(...

			
		

	





	

		

			

				
					
jq应用

				
			

			

				

					qq_35401191的博客
				

				

					07-14
					
					254
					
				

			

		

		

			
				
属性

attr   从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说比较慢（可读可写）

    $('div').attr('class')        读出div标签的class名)

    $('div').attr('class=demo')        修改div标签的lacss名（可以设置多个属性名）

    $('div').attr('data':'nu...

			
		

	





	

		

			

				
					
jQuery 应用【转】

				
			

			

				

					weixin_30945039的博客
				

				

					01-04
					
					78
					
				

			

		

		

			
				
原文：http://www.cnblogs.com/Eeyore/favorite/125798.html


ASP jQuery AJAX无刷新评论 

JQuery Tabs应用：添加、删除、新增Tab闪烁提醒 

51+ Best of jQuery Tutorials and Examples 

使用Jquery应用到Asp.net ajax中时3个误区应该避免 
...

			
		

	





	

		

			

				
					
jq的应用

				
			

			

				

					kkddqq1121的博客
				

				

					06-06
					
					457
					
				

			

		

		

			
				
jq

			
		

	





	

		

			

				
					
【HTML】以Jquery实现前后端程序简单交互

				
			

			

				

					あの花
				

				

					04-18
					
					1723
					
				

			

		

		

			
				
根据所提供的后端接口，在前端程序中以Jquery实现前后端程序交互。1）调用后端数据显示接口，获取数据并遍历显示在前端页面中。2）界面录入数据，调用后端数据写入接口，将所提交的数据写入数据库。
<script>
			function Get() {
				$.get(
					"http://localhost:7277/Stu/getStuList",
					functio...

			
		

	





	

		

			

				
					
使用PHP和jQuery构建AJAX web应用

				
			

			

				

					
				

			

		

		

			
				
这本书不仅涵盖了高级PHP技术，还教读者如何使用jQuery增强动态应用的交互性，无需页面刷新即可实现查看和编辑功能。  在本书中，读者将学习到以下关键知识点：  1. **利用PHP构建日历应用**：你将学习如何使用PHP...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值