Web前端-JavaScript--ajax案例

最新推荐文章于 2022-06-09 10:32:57 发布
最新推荐文章于 2022-06-09 10:32:57 发布
阅读量358 收藏 5
点赞数
分类专栏： web前端 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanghainan0318/article/details/106139570
版权

聊天机器人Array版

 需求:
            点击按钮发送消息  实现聊天


        步骤:
            1.获取元素 #send  #inp  #msglist
            2.按钮点击事件 获取输入框内容
            3.创建本次发送的聊天框div 拼接到msglist里面去
            4.将本次发送的聊天 调用ajax发送给服务器
            5.服务器返回机器人说的话
            6.根据机器人说的话  创建聊天框  拼接到msglist里面

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
      html,body{
          height: 100%;
      }
        #box{
            width: 400px;
            height: 98%;
            border: 1px solid #e4393c;
            margin:0 auto;
            background: url("bg.jpg") no-repeat 0 0/100% 100%;
        }
        #msglist{
            height: 80%;
            overflow: auto;
        }
        #content{
            height: 20%;
        }
        #inp,#send{
            vertical-align: top;
            height: 100%;
            border: none;
            outline: none;
        }
        #inp{
            width: 70%;
            font-size:40px;
        }
        #send{
            width: 30%;
            background-color: #e4393c;
            color:white;
            font-size:35px;
        }
        #send:active{
            background-color: #d00000;
        }
        #msglist>div{
            height: 35px;
            padding: 0 20px;
            line-height: 35px;
            font-weight:700;
            border-bottom: 1px dotted hotpink;
        }
        #msglist>.own{
            text-align: right;

            background-color: rgba(255, 255, 255, 0.4);

        }
        #msglist>.robot{
            background-color: rgba(255, 0, 0, 0.4);
            border-bottom: 1px dotted #e4393c;
            color: white;
        }






    </style>
</head>
<body>
<div id="box">
    <div id="msglist">
 <!--       <div class="own">你好</div>
        <div class="robot">我不好</div>-->



    </div>
    <div id="content">
        <input type="text" id="inp"><button id="send">发送</button>


    </div>




</div>
<script>


    var ownChat="own";
    var robotChat="robot";



//    1.获取元素 #send  #inp  #msglist
    var send=document.getElementById("send");
    var inp=document.getElementById("inp");
    var msglist=document.getElementById("msglist");

//    2.按钮点击事件 获取输入框内容
    send.onclick=function () {
        var val=inp.value;
        if(val==""){
            alert("发送的内容不能为空!");
            return;

        }
//        3.创建本次发送的聊天框div 拼接到msglist里面去
        setChat(ownChat,val);
//        每次发送完 都把  输入框清空
        inp.value="";

//        4.将本次发送的聊天 调用ajax发送给服务器
        ajax_tools({
            url:"php/02.chatServerByArray.php",
            type:"post",
            data:"chatcontent="+val,
            success:function (res) {
                // 5.服务器返回机器人说的话
//                console.log(res.responseText);

//                6.根据机器人说的话  创建聊天框  拼接到msglist里面
                   setChat(robotChat,res.responseText);
            }

        })




    }

//    把创建聊天框的功能 封装成方法
    function setChat(className,content) {
        var ownDiv=document.createElement("div");
        ownDiv.setAttribute("class",className);
        ownDiv.innerHTML=content;
        msglist.appendChild(ownDiv)
//        每次新创建出div就要让  msgList显示到最底部
//        手动设置 msglist被卷去的头部 等于  整个内容的高度
        //那就表示始终卷到头  也就是始终显示底部
        msglist.scrollTop=msglist.scrollHeight;


    }

    function ajax_tools(settings) {
        if(!settings.url){
            return;
        }

        var ajaxObj=new XMLHttpRequest();

        if(settings.type && settings.type.toUpperCase()=="POST"){
//            匹配到这 只有这么几个值:  post  POST  Post poSt....

            ajaxObj.open(settings.type,settings.url);
            ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            if(settings.data){
                ajaxObj.send(settings.data);
            }else{
                ajaxObj.send();
            }


        }else{
//            其他一切情况 直接暴力的 把它该成  get方式
            settings.type="get";
            if(settings.data){
                settings.url=settings.url+"?"+settings.data;

            }
            ajaxObj.open(settings.type,settings.url);
            ajaxObj.send();
        }
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof settings.success=="function"){
                    settings.success(ajaxObj);

                }

            }
        }


    }
</script>

</body>
</html>

php

<?php
    header('Content-type:text/html;charset=utf-8');


    if(!isset($_POST["chatcontent"])){
        echo "你还未发送你要说的话!";
        return;
    }


   $chatcontent= $_POST["chatcontent"];


    $chatArr=array(
        "你好"=>array("我不好","不借钱","爱过","不健身","很不好","你走..."),
        "你吃了没"=>array("你请客熬?","没钱..","吃不起","双十一刚过..","猪肉炖粉条","肘子肉"),
        "再见"=>array("再也不见","一个以为不会走","一个以为会挽留","跪安吧..","卡其嘛","滚吧.."),
        "你多大了"=>array("你要干啥","我洗澡去了","不是本人","帮忙挂微信的","[自动回复]你说啥?")

    );
    $defaultArr=array("你说啥呢?","你们人类的世界我不懂","请再说一遍.","你瞅啥","铁憨憨..");


      //延迟2秒执行 模拟接收信息慢  time()函数获取当前时间
         time_sleep_until(time()+1.5);


//    判断发送的关键字在数组中是否存在
    if(array_key_exists($chatcontent,$chatArr)){

        //array_rand  表示随机从数组所有角标中 取出一个或多个
        $arr=$chatArr[$chatcontent];
//        取出一个随机角标
         $ranNum= array_rand($arr);

        echo $arr[$ranNum];
    }else{

        $ranNum= array_rand($defaultArr);

      echo $defaultArr[$ranNum];



    }






?>

聊天机器人json版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
      html,body{
          height: 100%;
      }
        #box{
            width: 400px;
            height: 98%;
            border: 1px solid #e4393c;
            margin:0 auto;
            background: url("bg.jpg") no-repeat 0 0/100% 100%;
        }
        #msglist{
            height: 80%;
            overflow: auto;
        }
        #content{
            height: 20%;
        }
        #inp,#send{
            vertical-align: top;
            height: 100%;
            border: none;
            outline: none;
        }
        #inp{
            width: 70%;
            font-size:40px;
        }
        #send{
            width: 30%;
            background-color: #e4393c;
            color:white;
            font-size:35px;
        }
        #send:active{
            background-color: #d00000;
        }
        #msglist>div{
            height: 35px;
            padding: 0 20px;
            line-height: 35px;
            font-weight:700;
            border-bottom: 1px dotted hotpink;
        }
        #msglist>.own{
            text-align: right;

            background-color: rgba(255, 255, 255, 0.4);

        }
        #msglist>.robot{
            background-color: rgba(255, 0, 0, 0.4);
            border-bottom: 1px dotted #e4393c;
            color: white;
        }






    </style>
</head>
<body>
<div id="box">
    <div id="msglist">
 <!--       <div class="own">你好</div>
        <div class="robot">我不好</div>-->



    </div>
    <div id="content">
        <input type="text" id="inp"><button id="send">发送</button>


    </div>




</div>
<script>

    var ownChat="own";
    var robotChat="robot";



//    1.获取元素 #send  #inp  #msglist
    var send=document.getElementById("send");
    var inp=document.getElementById("inp");
    var msglist=document.getElementById("msglist");

//    2.按钮点击事件 获取输入框内容
    send.onclick=function () {
        var val=inp.value;
        if(val==""){
            alert("发送的内容不能为空!");
            return;

        }
//        3.创建本次发送的聊天框div 拼接到msglist里面去
        setChat(ownChat,val);
//        每次发送完 都把  输入框清空
        inp.value="";

//        4.将本次发送的聊天 调用ajax发送给服务器
        ajax_tools({
            url:"php/03.chatServerByJson.php",
            type:"post",
            data:"chatcontent="+val,
            success:function (res) {
                // 5.服务器返回机器人说的话
//                console.log(res.responseText);

//                6.根据机器人说的话  创建聊天框  拼接到msglist里面
                   setChat(robotChat,res.responseText);
            }

        })




    }

//    把创建聊天框的功能 封装成方法
    function setChat(className,content) {
        var ownDiv=document.createElement("div");
        ownDiv.setAttribute("class",className);
        ownDiv.innerHTML=content;
        msglist.appendChild(ownDiv)
//        每次新创建出div就要让  msgList显示到最底部
//        手动设置 msglist被卷去的头部 等于  整个内容的高度
        //那就表示始终卷到头  也就是始终显示底部
        msglist.scrollTop=msglist.scrollHeight;


    }

    function ajax_tools(settings) {
        if(!settings.url){
            return;
        }

        var ajaxObj=new XMLHttpRequest();

        if(settings.type && settings.type.toUpperCase()=="POST"){
//            匹配到这 只有这么几个值:  post  POST  Post poSt....

            ajaxObj.open(settings.type,settings.url);
            ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            if(settings.data){
                ajaxObj.send(settings.data);
            }else{
                ajaxObj.send();
            }


        }else{
//            其他一切情况 直接暴力的 把它该成  get方式
            settings.type="get";
            if(settings.data){
                settings.url=settings.url+"?"+settings.data;

            }
            ajaxObj.open(settings.type,settings.url);
            ajaxObj.send();
        }
        ajaxObj.onreadystatechange=function () {
            if(ajaxObj.readyState===4 && ajaxObj.status===200){
                if(typeof settings.success=="function"){
                    settings.success(ajaxObj);

                }

            }
        }


    }
</script>

</body>
</html>

php

<?php
    header('Content-type:text/html;charset=utf-8');
     if(!isset($_POST["chatcontent"])){
            echo "你还未发送你要说的话!";
            return;
     }


     $chatcontent= $_POST["chatcontent"];
//        模拟聊天时间延迟
     //延迟2秒执行 模拟接收信息慢  time()函数获取当前时间
       time_sleep_until(time()+1.5);
//    读取那个整个数据的json文件
      $dataStr= file_get_contents("json/data.json");
//       读取默认回复的那个json文件
        $defaultstr=file_get_contents("json/default.json");

//      把json字符串解码成  PHP变量
/*
        json_decode 第一个参数是要转换的json字符串
        第二个参数是布尔值  true表示转换成数组  false转换成对象
    */

//        json_decode
    $dataArr=json_decode($dataStr,true);
    $defaultArr=json_decode($defaultstr,true);



//    print_r($dataArr);

    //$dataArr 就是相当于原来我们的那个大的关系型数组


     if(array_key_exists($chatcontent,$dataArr)){

        $arr=$dataArr[$chatcontent];

         $ranNum= array_rand($arr);

        echo $arr[$ranNum];
    }else{

        $ranNum= array_rand($defaultArr);

      echo $defaultArr[$ranNum];


    }
?>

实现跟hao123内置的百度搜索候选词一样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            vertical-align: top;
        }
        form{
            width: 700px;
            height: 40px;
            background-color: #317EF3;
            margin: 150px auto 0;

        }
        #content{
            height: 38px;
            border: none;
            outline: none;
            width: 600px;
            margin-top: 1px;
            margin-left: 1px;
            font-size: 18px;
            text-indent:10px;


        }
        button{
            border: none;
            outline: none;
            width: 99px;
            height: 40px;
            background-color: #317EF3;
            vertical-align: top;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }
        #box{
            /*background-color: red;*/
            overflow: hidden;
        }
        ul{
            list-style: none;
            width: 600px;
            /*margin: 0 auto;*/
            /*background-color: blue;*/
           position: absolute;
            left: 50%;
            margin-left: -350px;
            border: 1px solid #ccc;
            margin-top: -1px;

            display: none;
        }
        ul>li{
            height: 30px;
            text-indent: 10px;
            line-height: 30px;
            cursor: default;

        }
        ul>li:hover{
            background-color: #ccc;
        }



    </style>
</head>
<body>


<div id="box">
    <form action="https://www.baidu.com/s?tn=50000022_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHRdrjnYP1R1Pj04niuW5y99U1Dznzu9m1YkPWDsrH6LPWfs&ssl_sample=normal&srcqid=3128286942589870639&f=3&rsp=3&H123Tmp=nunew7">
        <input autocomplete="off"  type="text" name="word" id="content"><button>百度一下</button>

    </form>
    <ul id="search">
        <!--<li>模拟百度搜索候选词不知道用什么来凑了</li>-->
        <!--<li>吼吼</li>-->
        <!--<li>模拟白</li>-->
    </ul>


</div>


<script src="jquery-1.11.1.js"></script>
<script>
    /*
        需求:
            实现跟hao123内置的百度搜索候选词一样的效果


            分析:
                oninput事件  调用百度接口 发送要搜索的词
                返回的数据渲染成li标签放到页面上 显示列表

                点击每一个li把内容放到输入框里面

            
            
              作业:
                时间: 半个小时   用JQ的跨域实现  CSS和html和js都要自己写
                  11月4日交

            
     */
//    JQ没有input事件 所以用js原生的
    $("#content").get(0).oninput=function () {

//        获取本次输入框的内容
        var val=$(this).val();
        if(val=="" || /^[A-Z]$/.test(val) || /^[a-z]$/.test(val)){
            //长度不够或者没有内容 有可能是没输入 也有可能 东西删除了

            $("#search").empty().hide();
//            如果当前输入框没有内容或者 内容是一个a字母 那么暂时不往下操作了
            return;

        }

        getData(val);
        
        
        
    }
    
    function getData(val) {
        //    每次要请求新结果之前先把老结果清空
        $("#search").empty();
        $.ajax({
            url:"https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd="+val,
            dataType:"jsonp",
            jsonp:"cb",
            success:function (data) {
              var resultArr=data.g;
              if(!resultArr){
                    return;
              }
//              先把ul显示出来
              $("#search").show();



              for(var i=0;i<resultArr.length;i++){
//                  console.log(resultArr[i].q);
                  $("#search").append("<li>"+resultArr[i].q+"</li>")
                  
              }
            },

        })
        
    }


//    失去焦点把列表隐藏
    $("#content").blur(function () {
//        alert("失去焦点了哟!")
        $("#search").hide();


    })
//    获取焦点时 重新请求
    $("#content").focus(function () {
        //        获取本次输入框的内容
        var val=$(this).val();
        if(val=="" || val.length<2){
//            如果当前输入框没有内容或者 内容是一个a字母 那么暂时不往下操作了
            return;

        }

        getData(val)
    })

//    给每一个li添加点击事件 点击时 li的内容放上去
//    $("#search").on("click","li",function () {
//    因为点击事件 是在输入框的失去焦点事件之后执行 所以 一旦失去焦点li就隐藏了
    //再也无法触发点击事件 所以换成了 鼠标按下   这个事件是在 输入框的 失去焦点之前执行
    $("#search").on("mousedown","li",function () {
//        alert("本次点的内容:"+$(this).html())
        $("#content").val($(this).html())
        $("#search").hide();
    })



</script>


</body>
</html>

 

yanghainan0318
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax+css一些前端应用例子（超过15种效果）
07-21
ajax+css一些前端应用例子，你可以从中学到很多东西，包括搜索引擎的索引，超过15种效果
《前端》jQuery-ajax例子
BelleDiao的博客
03-19 417
前面有jQuery-ajax的笔记：https://blog.csdn.net/bellediao/article/details/104239715 例1：将接口中的result字段绘制成表格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt...
Web前端-Ajax基础技术(上)
weixin_30932215的博客
03-10 45
Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求，接受服务端返回的响应，通过javascript调用，实现通过代码控制请求与响应，实现网络编程。 ajax发送请求： <!DOCTYPE html> <html lang="en"> <head> <meat charset="UTF-8"> <...
WEB中AJAX实例
dong709936344的博客
06-17 1436
本文仅仅是个人喜欢用的一种AJAX方式，个人感觉简单易懂，项目基于SSI框架。本例中没有导入该代码依赖的类，因为没有引入第三方JAR包，把代码拷到myeclipse中，提示你缺少什么类，你就导入什么类就行了。 从前往后代码如下： 本例是当用户在输入框中输入值的时候实时去后台数据库中查询相关信息 使用到的插件或者JS文件如下： jquery-1.8.3.min.js jquery.artDia
JavaScript前端开发案例教程-PPT(3).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
JavaScript前端开发案例教程-PPT(2).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
JavaScript前端开发案例教程-PPT(1).rar
04-29
《JavaScript前端开发案例教程》是面向计算机相关专业的一门Web前端基础课程，涉及JavaScript语言基础、数组、函数、对象、BOM、DOM、事件、正则表达式、Ajax、jQuery等内容。
Web前端开发技术-Jquery其他方法.pptx
07-07
$.ajax()方法：jQuery提供了$.ajax()方法，用来通过Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）技术请求服务器，获取服务器的响应结果。 Ajax是结合服务器端才能实现，需要具备了服务器搭建、...
Web前端Ajax&JQuery视频教程课件
12-17
XMLHttpRequest实现Ajax，回调函数，Ajax数据交换格式(HTML、XML、JSON)，Ajax发送GET和POST请求，异步编程模型和同步编程模型，解决Ajax的GET请求缓存问题，使用Ajax验证用户名是否可用、省和城市多级联动等案例。...
Ajax完整项目实例
10-29
这是应用Ajax技术开发的一个web项目，图书管理系统，里面有详细的注解！
ajax实例,包括前后台
12-09
自己整理的一个ajax例子:包括前台javascript和后台返回值写法(java)。 今天在网上找ajax的基本写法，没想到一时半会竟然找不到完整例子，郁闷了一下，所以自己整了个，希望能帮到大家。
Ajax最简单例子Demo
04-13
Ajax最简单例子，一个例子让你明白Ajax原理，XMLHttpRequest原理 <script language="javascript"> var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); //设置MIME类别 } } else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } if (!http_request) { alert("不能创建XMLHttpRequest对象实例！"); return false; } http_request.onreadystatechange = getResult; //调用返回结果处理函数 http_request.open('POST', url, false); http_request.send(); }
一个非常简单的ajax例子
07-31
一个非常简单的ajax例子 可以直接运行 其中包括两个javascript 从中可以看到如何创建XMLHttpRequest对象 对初学AJAX的会用帮助
ajax经典案例开发大全有几个案例
05-17
ajax经典案例开发大全 涵盖了带进度的文件上传，注册表单验证、产品快速检索 页面关键字提示，动态加载数据 自动定时业务等
Ajax入门案例
m0_51067047的博客
06-29 178
1、Ajax Asynchronous JavaScript and XML (异步的Javascript 和 XML) ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强地web应用程序的技术。 增加B/S的体验性 （浏览器/服务器） 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输
Java：Ajax案例
tsfx051435adsl的博客
12-13 563
前言在javaweb中，ajax是前后台交互的技术，可以实现异步请求，不用刷新整个页面就可以完成操作。案例1：用ajax实现登录1、在myeclipce中创建web项目，目录结构如下，该建包建包，该建类建类，该建jsp建jsp，该导入jquery导入jquery。 **2、实现的功能是：在index.jsp 中用户输入id和username，点击登录，传到后台，如果id为110，usernam
Ajax技术 实例篇
weixin_47044904的博客
06-09 1096
本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验
JavaWeb前端Ajax基础学习笔记
Ailing_kildd的博客
05-04 1098
一、全局刷新和局部刷新 全局刷新:整个浏览器被新的数据覆盖。在网络中传输大量的数据。浏览器需要加载，渲染页面。 局部刷新:在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。 其余的页面无需加载和渲染。网络中数据传输量少，给用户的感受好。 ajax是用来做局部刷新的。局部刷新使用的核心对象是异步对象（XMLHttpRequest) 这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用XMLHttpRequest对象。 二、ajax : Asynchronous JavaScr
web前端开发技术案例
最新发布
12-21
Web前端开发技术案例可以是一个基于React框架搭建的电子商务网站。该网站采用了响应式设计，可以在不同的设备上（包括手机、平板和电脑）良好地显示和交互。网站使用了HTML、CSS和JavaScript等前端技术来构建页面...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值