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

原文: [url]http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php[/url]

 

算翻译吧，我改了不少东西，还解决其中的乱码问题，嘿嘿，算原创吧，忽忽。。。

 

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:

 

<?php 
header( "Content-Type:text/html;charset=utf-8"); //页面的字符集编码 
$dbhost =  "localhost"; 
$dbuser =  "root"; 
$dbpass =  "123456"; 
$dbname =  "ajax"; 
//连接mysql 
mysql_connect($dbhost, $dbuser, $dbpass); 
//选择数据库 
mysql_select_db($dbname) or die(mysql_error()); 
 
mysql_query( "set names utf8"); //防止查询乱码 
 
//检索 查询串 
$age = $_GET['age']; 
$sex = $_GET['sex']; 
$wpm = $_GET['wpm']; 
 
// 防止注入 
$age = mysql_real_escape_string($age); 
$sex = mysql_real_escape_string($sex); 
$wpm = mysql_real_escape_string($wpm); 
 
//构造查询 
$query =  "SELECT * FROM ex1 WHERE sex = '$sex'"; 
if(is_numeric($age)) 
$query .=  " AND age <= $age"; 
if(is_numeric($wpm)) 
$query .=  " AND wpm <= $wpm"; 
 
//执行查询 
$qry_result = mysql_query($query) or die(mysql_error()); 
 
//结果串 
$display_string =  "<table>"; 
$display_string .=  "<tr>"; 
$display_string .=  "<th>姓名</th>"; 
$display_string .=  "<th>年龄</th>"; 
$display_string .=  "<th>性别</th>"; 
$display_string .=  "<th>打字速度</th>"; 
$display_string .=  "</tr>"; 
 
// 为每一个返回的人插入一行. 
while($row = mysql_fetch_array($qry_result)){ 
  $display_string .=  "<tr>"; 
  $display_string .=  "<td>{$row['name']}</td>"; 
  $display_string .=  "<td>{$row['age']}</td>"; 
  $display_string .=  "<td>{$row['sex']}</td>"; 
  $display_string .=  "<td>{$row['wpm']}</td>"; 
  $display_string .=  "</tr>"; 
} 
echo  "查询: " . $query .  "<br />"; 
$display_string .=  "</table>"; 
echo $display_string; 
?> 

 

后台页面编码utf-8.

 

主要考虑ajax的utf8做的改动。

 

 

相关截图:

 

 

 

 

 

 

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/110868，如需转载请自行联系原作者