php/ajax/mysql---有很关键的ajax乱码解决哦-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

php/ajax/mysql---有很关键的ajax乱码解决哦

简介:
 
算翻译吧,我改了不少东西,还解决其中的乱码问题,嘿嘿,算原创吧,忽忽。。。
 
ajax.html:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Ajax教程</title> 
<script language="javascript" type="text/javascript"> 
//浏览器支持代码 
function ajaxFunction(){ 
  var ajaxRequest;    //xmlHttpRequest对象 
    
  try{ 
    // Opera 8.0+, Firefox, Safari 
    ajaxRequest = new XMLHttpRequest(); 
  } catch (e){ 
    // IE系列 
    try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
      try{ 
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
        // 古老的浏览器 
        alert("你的浏览器不支持Ajax!"); 
        return false; 
      } 
    } 
  } 
    
  // 创建一个函数负责介绍来自服务器的数据 
  ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('ajaxDiv'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
    } 
  } 

  var age = document.getElementById('age').value; 
  var wpm = document.getElementById('wpm').value; 
  var sex = document.getElementById('sex').value; 
  var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex; 
  ajaxRequest.open("GET", "ajaxmysql.php" + queryString, true);    
  ajaxRequest.send(null);    

</script> 
</head> 
<body> 
<form name='myForm'> 
最大年龄: <input type='text' id='age' /> <br /> 
最大打字速度WPM(words per minute): <input type='text' id='wpm' /> 
<br /> 
性别: <select id='sex'> 
<option value='m'></option> 
<option value='f'></option> 
</select> 
<input type='button' onclick='ajaxFunction()' value='查询mysql' /> 
</form> 
<div id='ajaxDiv'>这里显示结果.</div> 
</body> 
</html> 

 
前台的字符集编码是国标gb2312保存的按gb2312编码保存(用的emeditor编辑器).
 
后台页面ajaxmysql.php:
 
InBlock.gif<?php 
InBlock.gifheader("Content-Type:text/html;charset=utf-8");//页面的字符集编码 
InBlock.gif$dbhost = "localhost"
InBlock.gif$dbuser = "root"
InBlock.gif$dbpass = "123456"
InBlock.gif$dbname = "ajax"
InBlock.gif//连接mysql 
InBlock.gifmysql_connect($dbhost, $dbuser, $dbpass); 
InBlock.gif//选择数据库 
InBlock.gifmysql_select_db($dbname) or die(mysql_error()); 
InBlock.gif 
InBlock.gifmysql_query("set names utf8");//防止查询乱码 
InBlock.gif 
InBlock.gif//检索 查询串 
InBlock.gif$age = $_GET['age']; 
InBlock.gif$sex = $_GET['sex']; 
InBlock.gif$wpm = $_GET['wpm']; 
InBlock.gif 
InBlock.gif// 防止注入 
InBlock.gif$age = mysql_real_escape_string($age); 
InBlock.gif$sex = mysql_real_escape_string($sex); 
InBlock.gif$wpm = mysql_real_escape_string($wpm); 
InBlock.gif 
InBlock.gif//构造查询 
InBlock.gif$query = "SELECT * FROM ex1 WHERE sex = '$sex'"
InBlock.gifif(is_numeric($age)) 
InBlock.gif$query .= " AND age <= $age"
InBlock.gifif(is_numeric($wpm)) 
InBlock.gif$query .= " AND wpm <= $wpm"
InBlock.gif 
InBlock.gif//执行查询 
InBlock.gif$qry_result = mysql_query($query) or die(mysql_error()); 
InBlock.gif 
InBlock.gif//结果串 
InBlock.gif$display_string = "<table>"
InBlock.gif$display_string .= "<tr>"
InBlock.gif$display_string .= "<th>姓名</th>"
InBlock.gif$display_string .= "<th>年龄</th>"
InBlock.gif$display_string .= "<th>性别</th>"
InBlock.gif$display_string .= "<th>打字速度</th>"
InBlock.gif$display_string .= "</tr>"
InBlock.gif 
InBlock.gif// 为每一个返回的人插入一行. 
InBlock.gifwhile($row = mysql_fetch_array($qry_result)){ 
InBlock.gif  $display_string .= "<tr>"
InBlock.gif  $display_string .= "<td>{$row['name']}</td>"
InBlock.gif  $display_string .= "<td>{$row['age']}</td>"
InBlock.gif  $display_string .= "<td>{$row['sex']}</td>"
InBlock.gif  $display_string .= "<td>{$row['wpm']}</td>"
InBlock.gif  $display_string .= "</tr>"
InBlock.gif
InBlock.gifecho "查询: " . $query . "<br />"
InBlock.gif$display_string .= "</table>"
InBlock.gifecho $display_string; 
InBlock.gif?> 
 
后台页面编码utf-8.
 
主要考虑ajax的utf8做的改动。
 
 
相关截图:
 
 
 
 
 
 
本文转自 xcf007 51CTO博客,原文链接:http://blog.51cto.com/xcf007/110868,如需转载请自行联系原作者





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章