PHP+Mysql+jQuery查询和列表框选择操作实例讲解


Posted in PHP onOctober 22, 2015

本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加入到已选区,可以用在许多后台管理系统中。本文列表框的操作依赖jquery插件。

PHP+Mysql+jQuery查询和列表框选择操作实例讲解

HTML

<form id="sel_form" action="post.php" method="post"> 
  <p><input type="text" name="keys" id="keys" value="输入姓名或手机号码" onclick="this.value=''" /> 
  <input type="button" id="searchOption" value="搜索" /> <span id="msg_ser"></span></p> 
  <div id="sel"> 
  <select name="liOption[]" id='liOption' multiple='multiple' size='8'> 
  </select> 
  </div> 
  <input type="submit" value="提 交" /> 
</form>

说明,HTML内容是一个表单,里面放置有一个查询输入框,和一个列表框,以及相关按钮。

MYSQL数据表结构

CREATE TABLE IF NOT EXISTS `t_mult` ( 
 `id` int(11) NOT NULL auto_increment, 
 `username` varchar(32) NOT NULL, 
 `phone` varchar(20) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

表t_mult是一张联系人资料表,包括姓名和手机号码字段。

CSS

<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />

本例中只加载了Multiselect插件所需的样式文件,其他CSS大家可以自行设计。
JAVASCRIPT
首先需要引用本例所需的两个js文件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.multiselect2side.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />

接着我们来调用Multiselect插件。

$("#liOption").multiselect2side({ 
  selectedPosition: 'right', 
  moveOptions: false, 
  labelsx: '待选区', 
  labeldx: '已选区' 
});

然后我们来写搜索按钮进行Ajax查询数据的操作。

$("#searchOption").click(function(){ 
  var keys=$("#keys").val(); 
  $.ajax({ 
     type: "POST", 
     url: "action.php", 
     data: "title="+keys, 
     success: function(msg){ 
      if(msg==1){ 
        $("#msg_ser").show().html("没有记录!"); 
      }else{ 
        $("#liOptionms2side__sx").html(msg); 
        $("#msg_ser").html(""); 
      } 
     } 
  }); 
  $("#msg_ser").ajaxSend(function(event, request, settings){ 
    $(this).html(""); 
  }); 
});

说明,当点击搜索按钮时,进行的是Ajax异步操作,JAVASCRIPT将获取的搜索框的输入值,以POST方式传递给后台程序action.php处理,处理后,返回不同的结果给JAVASCRIPT,如果返回1,HTML页面会提示“没有记录”,反之,则将结果输出给左边列表框(待选区):liOptionms2side__sx。注意关键的地方到了,为什么列表框不是XHTML离的liOption,而变成了liOptionms2side__sx了呢?这个要从Multiselect插件说起,Multiselect插件其实就是将一个列表框装换成左右两个列表框,已供相关操作,通过查看其插件代码不难发现,左边的列表框名为:liOptionms2side__sx,右边列表框(已选区)名为:liOptionms2side__dx,后面会用到。

PHP

首先来看action.php的处理。
第一步是连接数据库。

$conn=mysql_connect("localhost","root",""); 
mysql_select_db("demo",$conn); 
mysql_query("SET names UTF8");

第二步读取数据,并输出。通过检测搜索框传来的值,构造不同的SQL语句,并将数据返回输出,代码如下:

$keys=trim($_POST['title']); 
$keys=mysql_real_escape_string($keys,$conn); 
if(!empty($keys)){ 
   $sql="select * from t_mult where username like '%$keys%' or phone='$keys'"; 
}else{ 
   $sql="select * from t_mult"; 
} 
$query=mysql_query($sql); 
$count=mysql_num_rows($query); 
if($count>0){ 
  while($row=mysql_fetch_array($query)){ 
    $str.="<option value='".$row['id']."'>".$row['username']."-".$row['phone']."</option>"; 
  } 
  echo $str; 
}else{ 
  echo "1"; 
}

最后还有一个提交操作,后台post.php程序来获取最终提交的项的值。

$selID=$_POST['liOptionms2side__dx']; 
if(!empty($selID)){ 
  $str=implode(",",$selID); 
  echo $str; 
}else{ 
  echo "没有选择任何项目!"; 
}

注意,我们获取的是右边列表框liOptionms2side__dx的值,而不是liOption的值。
一个查询、操作的例子实现了,但是还有一点点瑕疵,在待选区往已选区添加项目时,如何判断控制已经添加过的项目不能重复添加,这个就留给大家思考吧,试一试有什么好的解决方式。

PHP 相关文章推荐
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
Dec 06 PHP
php 无限级数据JSON格式及JS解析
Jul 17 PHP
细谈php中SQL注入攻击与XSS攻击
Jun 10 PHP
五款PHP代码重构工具推荐
Oct 14 PHP
php+mysqli事务控制实现银行转账实例
Jan 29 PHP
PHP递归创建多级目录
Nov 05 PHP
PHP写的简单数字验证码实例
May 23 PHP
ThinkPHP框架实现的邮箱激活功能示例
Jun 15 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
Apr 02 PHP
php数值计算num类简单操作示例
May 15 PHP
PHP数组基本用法与知识点总结
Jun 02 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
Jun 06 PHP
PHP实现无限级分类(不使用递归)
Oct 22 #PHP
PHP实现递归无限级分类
Oct 22 #PHP
php防止网站被攻击的应急代码
Oct 21 #PHP
PHP统计当前在线用户数实例讲解
Oct 21 #PHP
php精确的统计在线人数的方法
Oct 21 #PHP
为你总结一些php信息函数
Oct 21 #PHP
深入理解PHP变量的值类型和引用类型
Oct 21 #PHP
You might like
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
Python 文件处理注意事项总结
2017/04/10 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Django单元测试工具test client使用详解
2019/08/02 Python
Pycharm Git 设置方法
2020/09/15 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
内业资料员岗位职责
2014/01/04 职场文书
思想汇报格式
2014/01/05 职场文书
认识深刻的检讨书
2014/02/16 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
Python实现仓库管理系统
2022/05/30 Python