AJAX JS DOM前后台交互详细步骤手把手（图解）

前后台交互步骤

一、搭建后台

1.创建项目目录basepro

2.创建项目目录中的静态文件夹public

3.安装依赖

首先这样做会生成一个package.json的配置文件，并在里面增加相应的版本信息，以后运行程序时，安装依赖包可以直接 npm install xxx

其次，安装npm install express时项目目录会创建node_modules目录，并在该目录下多了所有依赖的包。

4. 创建作为项目的入口文件，用于创建应用程序对象

- 引入express

- 创建WEB服务器

- 监听8080端口

- 托管静态资源./public文件

- 创建get方式请求的路由，并查看参数和给予返回值

- 解析表单中的 url-encoded 格式的数据

- 创建post方式请求的路由，并查看参数和给予返回值

- 创建put方式请求的路由，并查看参数和给予返回值

- 创建delet方式请求的路由，并查看参数和给予返回值

5. 运行




//在当前目录下的终端中输入npm install express 安装



//1.引入express




var express = require('express');



//2.创建web服务器，实例化




var app = express();



//3.设置端口



app.listen(8080);



/* 4.静态资源托管()将静态资源的



目录放入到参数中，不是必须只有这一个文件目录可以托管,



也不是只有这一个文件目录可以 */



app.use(express.static('./public'));



//5.在终端启动服务器node 



//6.给前台一个接口地址,因为前台发请求用的get，后台交互数据，也用的get



//地址路径（字符串格式）



//接收前台？方式传递的参数



app.get('/getpar1',(req,res)=>{



    console.log(req.query)



})



 



//接收post方法的接口地址



//接收之前，需要单独解析通过urlencoded传递的格式



app.use(express.urlencoded({extended:false}))



app.post('/ajaxpost',(req,res)=>{



    console.log(req.body)



    res.send('post方式返回值')



})



 



//接收put方法的接口地址



app.put('/ajaxput',(req,res)=>{



    console.log(req.body);



    res.send('put方式返回值');



})



 



//接收delete方法的接口地址



app.delete('/ajaxdel/:names',(req,res)=>{



    console.log(req.params);



    res.send('delete方法返回值')



})

二、浏览器请求

方式





<script>




    //1.创建xhr对象





var xhr = new XMLHttpRequest();



//4.原本接收数据，现在通过监听判断readyState的值，为4的时候收据就回来了



xhr.onreadystatechange = function () {



    //()




    //判断readyState是4的时候才可以拿到后台的数据




    if (xhr.readyState == 4) {



        //判断返回内容成功，再接收数据




        if (xhr.status >= 200 && xhr.status < 300) {



            var result = xhr.responseText;



            console.log(result);



        }



    }



}



// 2.设置请求信息



xhr.open('get','/getpar1?names=张三 & pwd=123456',true);



//3.发送请求（不同方法，发送请求的格式有不同）



//get方法直接是（）参数可省略，也可以(null)



xhr.send();



</script>

方式




//1.创建异步对象 




var xhr =new XMLHttpRequest();



//4.监听并返回值



xhr.onreadystatechange=function(){



    //判断readyState==4




    if(xhr.readyState ==4){



        //判断状态码




        if(xhr.status>=200 && xhr.status<300){



            //接收返回内容




            var result=xhr.responseText;



            console.log(result);



        }



    }



}



//2.设置请求信息



xhr.open('post','/ajaxpost',true);



//post方式发送之前必须指定传递参数的数据格式



//设置请求头，先指定请求参数的解析方式再传递数据



xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");



//3.发送请求



xhr.send('names=bob & pwd=333');



 // 浏览器访问 http://localhost:8080/

方式





var a='tom';




var b='lili';



//1.创建异步对象




var xhr=new XMLHttpRequest();



//4.监听等待返回值



xhr.onreadystatechange=function(){



    //判断




    if(xhr.readyState==4){



        if(xhr.status>=200 && xhr.status<300){



            //接收返回内容




            var result=xhr.responseText;



            console.log(result);



        }



    }



}



//2.设置请求信息



xhr.open('put','/ajaxput',true);



//请求头



xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');



//3.发送请求



xhr.send(`names=${b} & oldname=${a}`);

方式





var username='王五';



//1.创建异步对象




var xhr=new XMLHttpRequest();



//4.监听并返回值



xhr.onreadystatechange=function(){



    if(xhr.readyState==4){



        if(xhr.status>=200 & xhr.status<300){



            var result=xhr.responseText;



            console.log(result);



        }



    }



}



//2.设置请求信息



xhr.open('delete',`/ajaxdel/${username}`,true);



//3.发送请求



xhr.send();

4.避免 icon的错误

<link rel="shortcut icon" href="#" />

三、DOM

的简述

DOM 全称 Document Object Model，即文档对象模型，它允许脚本(js)控制 Web 页面、窗口和文档。

简单说就是用js去动态操作浏览器窗口内的所有元素。

2. DOM 基本功能

- 查询某个元素

- 查询某个元素的祖先、兄弟以及后代元素

- 获取、修改元素的属性

- 获取、修改元素的内容

- 创建、插入和删除元素

简单说就是对页面元素的增删改查。

二、元素的操作（应用部分）

1.通过元素id获取到该元素

`()`在文档中按照 id 属性查找元素参数写 id 名。

```js

//获取到html元素中id叫做myDiv的元素整体

var myDiv = ('myDiv');

在能够支持ES6的浏览器中，可以简写方式获取元素对象。直接用id值代指当前元素对象。

2.事件——与元素交互

可以在 DOM 元素上绑定`onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeyup`等。JavaScript 能够在事件发生时执行。

（1）在 DOM 中直接绑定事件

直接在标签中设置事件属性，绑定方法，从而完成交互。

html：




<input type="button" value="点我" onclick="hello(1)" />




<script>




    function hello(a) {



        alert('hello world!');



    }



</script>

（2）在 JavaScript 代码中绑定事件

可以通过 js 获取元素，在 js 中绑定获取的元素相关的事件，调用函数处理事件功能。

js：





var btn = document.getElementById('mybtn');



btn.onclick = function () {



    alert('hello');



};

3. 获取/设置元素的内容innerHTML

获取/设置元素的内容。

innerHTML 在 JS 是双向功能：获取对象的内容或向对象插入内容。

html：





<div id="myDiv">div元素</div>





<script>




    var myDiv = document.getElementById('myDiv');



    myDiv.innerHTML = '<p>一个元素</p>';



</script>

- 可以通过`("myDiv").innerHTML`来获取`id`为`myDiv`的对象的内嵌内容；

-也可以对某对象插入内容，如`("myDiv").innerHTML=’这是被插入的内容’;`这样就能向 id 为 myDiv 的对象插入内容。

4. value值的获取

元素的 value 属性可以直接获取到具有 value 属性元素的的值。多数情况用在获取表单相关元素中。

html：




<input type="text" id="nn" />



<input type="button" value="获取" οnclick="print()" />




<script>




    var a = document.getElementById('nn');



    //通过事件获取值




    function print() {alert(a.value);}



</script>

练习：细解

> 在页面上放入一个文本输入框、一个密码输入框、一个按钮

> 使用 js 获取两个输入框元素和一个按钮元素

> 点击按钮元素触发点击事件，获得文本输入框和密码输入框的内容，并在控制台查看

> 创建两个 p 标签，使用 js 获取两个 p 元素

> 将获取的用户输入的用户名和密码显示页面上

01_get.html代码：




<body>



    用户：<input type="text" id="uname"><br>




    密码：<input type="text" id="upwd"><br>




    <button onclick="ajax()">登录</button>




    <script>




        ajax();



        function ajax() {



            //1.创建xhr对象




            var xhr = new XMLHttpRequest();



            //4.原本接收数据，现在通过监听判断readyState的值，为4的时候收据就回来了




            xhr.onreadystatechange = function () {



                //()




                //判断readyState是4的时候才可以拿到后台的数据




                if (xhr.readyState == 4) {



                    //判断返回内容成功，再接收数据




                    if (xhr.status >= 200 && xhr.status < 300) {



                        var result = xhr.responseText;



                        console.log(result);



                    }



                }



            }



            var myname=uname.value;



            var mypwd=upwd.value;



            // 2.设置请求信息




            xhr.open('get','/getpar1?names='+myname+'&pwd='+mypwd,true);



            //3.发送请求（不同方法，发送请求的格式有不同）




            //get方法直接是（）参数可省略，也可以(null)




            xhr.send();



        }



    </script>




</body>

代码：




//在当前目录下的终端中输入npm install express 安装



//1.引入express




var express = require('express');



//2.创建web服务器，实例化




var app = express();



//3.设置端口



app.listen(8080);



/* 4.静态资源托管()将静态资源的



目录放入到参数中，不是必须只有这一个文件目录可以托管,



也不是只有这一个文件目录可以 */



app.use(express.static('./public'));



//5.在终端启动服务器node 



//接收前台？方式传递的参数



app.get('/getpar1',(req,res)=>{



    console.log(req.query)



})

浏览器输入127.0.0.1:8080/01_get.html 回车，输入用户密码信息，点击登录

后台获得数据：

5. 清空多余空格-trim()方法

- `trim()`方法用于删除字符串的"头尾"空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。

- `trim()`方法不会改变原始字符串。

- `trim()`方法不适用于 null, undefined, Number 类型。





var str = '  hello   ';




alert(str.trim());

非空验证的方法





var str1 = '   ';




var str2 = ''





var str3 = ' tom ';




function notEmpty(s){



    var nstr = s.trim();



    return nstr.length;



}




notEmpty(str1)




notEmpty(str2)




notEmpty(str3)

'
运行

秒客网

AJAX JS DOM前后台交互详细步骤手把手（图解）

一、搭建后台

二、浏览器请求

三、DOM

二、元素的操作（应用部分）

相关文章

AJAX JS DOM前后台交互 详细步骤手把手（图解）

一、搭建后台

二、浏览器请求

三、DOM

二、元素的操作（应用部分）

相关文章

AJAX JS DOM前后台交互详细步骤手把手（图解）