学习用js, ajax, php做一个简单的小黄鸡页面（调用simsimi API）

最新推荐文章于 2021-03-10 12:04:29 发布

小福子

最新推荐文章于 2021-03-10 12:04:29 发布

阅读量897

点赞数

分类专栏： internet

internet 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在服务器端利用PHP调用Simsimi API，并在HTML页面上实现与用户的实时交互，包括输入验证、编码处理、AJAX请求等关键步骤。同时讨论了文件编码、编码信息标记、以及URL或表单传输中的编码问题，并提供了代码实例和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 服务器端的simsimi.php，参见http://www.52its.net/articles/407.html，在其开头还需加上一句，如下

[php]view plaincopy 
   
 <?php     
 /** 
  *   
  *作者：@Belin_love   
  *来源：http://52its.sinaapp.com/   
  *日期：2012.11.27   
  *   
  **/    
     
 //function simsimi($keyword)     
 //{     
 //做成API接口的话，请发起GET请求，返回Josn     
 //只自己用的话，封装成一个函数，返回JSON字段中的response     
     
 if(isset($_GET['key'])){         
     $keyword = $_GET['key'];     
     $keyword=rawurlencode($keyword);<span style="white-space:pre">  </span>//添加这句话，解决输入空格引起的的错误  
     $url = "http://www.simsimi.com/talk.htm?lc=ch";     
   
     //这个curl是因为官方每次请求都有唯一的COOKIE，我们必须先把COOKIE拿出来，不然会一直返回“HI”     
     $ch = curl_init();     
     curl_setopt($ch, CURLOPT_URL, $url);     
     curl_setopt($ch, CURLOPT_HEADER, 1);     
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);     
     $content = curl_exec($ch);     
     curl_close($ch);     
     list($header, $body) = explode("\r\n\r\n", $content);     
     preg_match("/set\-cookie:([^\r\n]*)/i", $header, $matches);     
     //curl_setopt($ch, CURLOPT_COOKIE, $cookie);     
     $cookie = $matches[1];     
       
     $urll = 'http://www.simsimi.com/func/req?msg=' .$keyword. '&lc=ch';     
        
     // 这个CURL就是模拟发起请求咯，直接返回的就是JSON     
     $ch = curl_init();     
     curl_setopt($ch, CURLOPT_URL, $urll);     
     curl_setopt($ch, CURLOPT_HEADER, 0);     
     curl_setopt($ch, CURLOPT_REFERER, "http://www.simsimi.com/talk.htm?lc=ch");     
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);     
     curl_setopt($ch, CURLOPT_COOKIE, $cookie);     
     $content = curl_exec($ch);     
     curl_close($ch);     
   
     //输出json     
     //print_r($content);     
     $reply = '你说的话太高深啦，我还听不懂，你可以教教我吗？[兔子]<a href="http://www.simsimi.com/teach.htm" target="_blank">点这里教我吧~~</a>';     
     $json = json_decode($content, 1);    
     if (isset($json['response'])) {    
         $reply = $json['response'];    
     }    
     echo $reply;    
 }  
 //}  
 ?>  

所加的句子使get获得的参数经过url编码（主要是让空格被编码，因为simsimi的API中msg字段不能直接处理含空格的字符串）。这样即完成一个API的调用。详情请跟踪http://www.simsimi.com/talk.htm的network请求！

2. 服务器上的html页面（如果作为本地文件使用，chrome不允许跨域访问，即file://与http://访问失败，可以chrome.exe --allow-file-access-from-files方式重新打开chrome；而IE8允许ActiveX之后可以）

[html]view plaincopy 
   
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  
 <script type="text/javascript">  
 function ajaxSimsimi(str){  
 var xmlhttp;  
 if (str.length==0){   
   document.getElementById("txtHint").innerHTML="";  
   return;  
   }  
 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari  
   xmlhttp=new XMLHttpRequest();  
   } else {// code for IE6, IE5  
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  
   }  
 xmlhttp.onreadystatechange=function(){    //XMLHttpRequest对象的有效返回判别  
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {  
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;  
     }  
   }  
 xmlhttp.open("GET","simsimi.php?key="+str,true);  
 xmlhttp.send();  
 }  
 </script>  
 </head>  
   
 <body>  
 <h3>请在输入框中键入消息并回车：</h3>  
 <form name="talk" action="simsimi.php"  method="GET">   
 求调戏：  
 <input type="text" class="textbox" name="key" onkeypress="if(event.keyCode==13){  
 ajaxSimsimi(encodeURIComponent(this.value));this.select();return false;}  
 "/>  
 <!--在文本框内检测敲回车后即执行ajax。先将文本框中的字符串通过url编码(即UTF-8传输)再传给ajax函数，并调用php接口从而返回response的字符串-->  
 <input type="button" value="确定" onclick="ajaxSimsimi(encodeURI(talk.key.value))"/>  
 </form>  
 <p>小贱鸡： <span id="txtHint">大爷，来调戏我啊~~~</span></p>   
   
 </body>  
 </html>  

效果图：

3. 注意事项：

3个编码问题：文件自身的编码，编码信息标记内容(meta)，url或表单传输的编码(js: encodeURI; php: [raw]urlencode)。文件自身编码会影响文本中字符串传递的方式，以上两文件中php建议使用UTF-8，html可以使用ANSI/GBK。当客户端向服务器提交内容时，需注意两方对编码的处理问题，要求一致。一般在表单提交时先直接用encodeURI对内容编码。此文中服务器返回内容的编码似乎不产生影响。参见http://tuzwu.iteye.com/blog/648214

ajax动态技术，参见w3school

文本框中输入回车后即执行。但在表单的文本框中，键入回车后触发事件代码需返回false以阻止默认的提交表单行为。