thinkjs学习(前后端交互篇)-this.assign传递数据和ajax调用后台接口

本文介绍了一种前后端交互的方法,包括使用this.assign配合模板引擎在页面加载时展示数据,以及利用Ajax实现表单数据的异步提交并获取后台响应。

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

在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取;用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口。本文通过一个例子讲述这两种方法的前后台实现。(方便起见,使用jQuery封装的ajax)’
(ps:ajax调用后台接口的情形通常是用户触发事件,给后台传递一些前台的数据,然后后台根据这些数据进行相关操作,再返回前台一些数据。举个表单提交的例子,用户点击提交按钮之后,将填写的表单信息传递个后台,后台对传过来的表单信息进行验证,并存储的数据库中,如果这两个过程都成功完成,返回前端一个true,如果失败,返回false。然后前端通过接收到的true和false给出用户相应的提示。)

一般网站都会有用户的个人中心,用户可以通过填写表单修改个人信息,下面就以此种情形为例。(user模块,personal控制器,index方法为页面显示,update方法为更新个人信息)

this.assign配合模板传递数据

首先是前端HTML。一个个人信息的表单。

<!-- /view/user/personal_index.html -->
<form>
      <div class="form-group">
        <label for="inputNickname">Nickname</label>
        <input type="text" class="form-control"  id="inputNickname" name="inputNickname" value="{{userInfo.user_name}}">
      </div>
      <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="Email" class="form-control" id="inputEmail" name="inputEmail" value="{{userInfo.user_mailbox}}">
      </div>
      <div class="form-group">
        <label for="inputTell">Tellphone</label>
        <input type="number" class="form-control" id="inputTell" name="inputTell" value="{{userInfo.user_tellphone}}">
      </div>
      <div class="form-group">
        <label for="inputCity">City</label>
        <input type="text" class="form-control" id="inputCity" name="inputCity" value="{{userInfo.user_city}}">
      </div>
      <div class="form-group">
        <label for=""></label>
        <button type="submit" class="btn btn-primary">Update Your Information</button>
      </div>
    </form>

这里使用的是nunjucks模板,打开这个页面时,表单中应该显示用户已有的信息,所以在/src/user/controller/personal.js的index方法里应该通过this.assign将用户信息赋给前台。

// /src/user/controller/personal.js
async indexAction(){
    let userInfo = await this.session('userInfo');


      if (think.isEmpty(userInfo)) {
        this.redirect('/user/login/index');
      }
      this.assign('userInfo',userInfo);

return this.display();
  }

因为是用户信息是在用户登录时就获取到然后存在缓存里的,所以这里是直接从缓存里获取,如果没有获取到用户信息需要重新登录,跳转到登录页面。如果用户信息存在就赋值给userInfo变量,然后在前端的value中获取到这个变量的值。有一点需要注意的是,使用模板时,双括号需要写在双引号里面,否则渲染出来获取到的值不在input的value里。’

Ajax传递数据:

当用户修改表单中的值,并点击提交按钮之后,需要将这些数据传送的后台,虽然可以直接在form的action属性里面写上后台的方法路径,method里面指定提交的方式,但是这种提交不便于获取返回的数据,而且会进行页面跳转,刷新等默认行为。所以通过ajax来传送数据,并通过回调获取返回的数据就可以避免以上这些情况发生。

前端personal_index.html引用的js文件:

// /www/static/js/personal.js
$(function(){
    $('form').submit(evt=>{
        evt.preventDefault();
        $.ajax({
            url: '/user/personal/update',
            type: 'POST',
            dataType: 'json',
            data: $('form').serialize(),
            success:res=>{
                if(!res.errno) {
                    alert('Update Successfully!');
                    window.location.reload();
                }
                else alert(res.errmsg);
            }
        });
    });
});

form的submit事件就是默认的表单提交事件,比如点击表单内type为submit的button或者input,在输入框中按下回车等。evt代表当前的事件,evt.preventDefault()就是阻止表单默认提交(通过form的action和method默认提交到对应方法)。然后通过ajax方法将表单信息传递给后台。ajax的使用方法如上面所示,url写对应方法的地址,形式就是’/模块名/控制器名/方法名’,type是’POST’或者’GET’,dataType是数据类型,这里是json,data是传递的数据,form可以简单的通过$(‘form’).serialize()来获取到表单的所有数据(序列化返回的结果举例:name=Kate&city=WuHan,与表单默认提交一致,input的name值和value值对应传给后台)。success是成功传给后台并且后台处理成功后的回调函数,res就是后台的返回值,如果成功,那么弹出更新成功的提示框,并且重新加载页面,用户信息也会更新。如果失败,那么弹出失败的提示框。

// /src/user/controller/personal.js
async updateAction(){
    let formInfo = this.post();
    let userList = this.model('user');
    let list = this.model('list');
    let userInfo = await this.session('userInfo');
    let affectedRows = await userList.where({user_uid: userInfo.user_uid}).update({user_name:formInfo.inputNickname,user_mailbox:formInfo.inputEmail,user_tellphone:formInfo.inputTell,user_city:formInfo.inputCity});

      if(!affectedRows){ this.fail(1000,'update failed!'); }
    //更新缓存
    let user = await userList.where({user_loginname: userInfo.user_loginname}).find();
    await this.session('userInfo',user);
    this.success();
  }

首先通过this.post()获取表单传过来的数据存到formInfo中(会转化成键值对的形式,就是js中对象的形式),然后更新这个用户数据库中的数据(通过user_uid这个用户唯一标识查找到该用户信息,并更新),再将更新后的信息存入缓存(注:本文是拿用户信息举例,所以要从缓存中读取,并存入缓存,其它情况可能并不需要使用session),如果有错或者没有成功改变,那么通过this.fail返回,前端回调函数获取到的res.errno为1000,’update failed!’可以通过前端的res.errmsg获取到, 完成之后通过this.success()返回(如需返回数据,将数据作为this.success()的参数即可,在前端回调中通过res.data获取到这个数据),前端回调获取到的res.errno为0。所以在前端js文件中ajax的success回调函数里,只需要判断res.errno即可知道后台执行相关操作的成功与否。

注:this.success和this.fail的用法参照https://thinkjs.org/zh-cn/doc/2.2/controller.html#toc-c6ahttps://thinkjs.org/zh-cn/doc/2.2/controller.html#toc-060

<think>我们被要求判断多个关于Ajax技术的说法是否正确。我们将逐一分析每个说法,并参考提供的引用内容。1.**onload事件需要对状态码进行判断**-在引用[2]的代码中,我们看到使用了`onreadystatechange`事件,并在其中检查了`readyState`为4(请求完成)后,直接输出了响应文本,但没有检查状态码(如200表示成功)。然而,在引用[3][5]中,使用了`onload`事件,但也没有检查状态码。但是,在实际开发中,我们应该在请求完成后检查状态码(如200)以确保请求成功。因此,这个说法是合理的,因为即使请求完成(readyState为4)也可能发生错误(如404、500等)。所以,在`onload`事件中,我们通常需要检查状态码以确保请求成功。但是,注意`onload`事件只有在请求成功完成(网络传输完成)时才会触发,但它不区分HTTP状态码。所以,我们仍然需要检查状态码。在引用中,代码示例没有展示,但在最佳实践中,应该检查。因此,这个说法**正确**。2.**req.body获取GET请求参数**-根据引用[1],在Express中,对于GET请求,查询参数是通过`req.query`获取的;而对于POST请求,如果请求体是JSON格式,则通过`req.body`获取。所以,`req.body`通常用于获取POST请求的请求体参数,而不是GET请求的参数。因此,这个说法**错误**。3.**Ajax增强用户体验**-Ajax技术允许网页异步更新,无需刷新整个页面,从而提供更流畅的用户体验。这是Ajax的核心优势之一。引用[1]中提到了Ajax用于传递查询参数,但没有直接说明用户体验。不过,这是公认的事实。因此,这个说法**正确**。4.**application/json数据格式**-在引用[4]中,提到了设置请求头的`Content-Type`,并且示例中使用了`xhr.setRequestHeader('Content-Type','请求参数格式');`。同时,引用[1]提到,在POST请求中,请求体可以是JSON格式。通常,当我们需要发送JSON数据时,会将`Content-Type`设置为`application/json`。因此,这个说法是正确的,它指的是请求体中发送JSON数据时的媒体类型。所以,这个说法**正确**。5.**创建Ajax对象的方式**-在多个引用中(如引用[2][3][5]),都使用了`newXMLHttpRequest()`来创建Ajax对象。这是原生的JavaScript方式。另外,引用中也提到了jQuery的`$.ajax`,但题目中并没有提到其他方式。所以,创建Ajax对象的标准方式确实是`newXMLHttpRequest()`。因此,这个说法**正确**。6.**ajax()函数参数传递方式**-注意:这里的`ajax()`函数可能是指jQuery中的`$.ajax()`函数。在引用[1]的“现代的FetchAPI”部分提到了`fetch()`,而在总结部分提到了jQuery的`$.ajax`。在jQuery中,`$.ajax()`函数通常通过一个配置对象传递参数,如:```javascript$.ajax({url:'...',method:'POST',data:{...},//参数success:function(res){...}});```在引用[1]中也提到,使用Ajax发送查询参数,对于POST请求,参数放在请求体中(JSON格式)。因此,在jQuery的`ajax()`函数中,参数是通过配置对象的属性(如`data`)传递的。这个说法应该是正确的,即参数通过配置对象传递。因此,这个说法**正确**。7.**Object.assign方法的作用**-这个问题与前面的说法不同,因为前面的引用中都没有提到`Object.assign`。`Object.assign`是JavaScript的一个方法,用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,返回目标对象。它通常用于对象合并,与Ajax没有直接关系。所以,题目中突然提到这个方法,但没有任何引用支持它在Ajax中的使用。因此,对于“Object.assign方法在Ajax中的作用”这一说法,我们不能直接说它在Ajax中有特定的作用。所以,这个说法**错误**(因为题目中并没有上下文说明它在Ajax中的特定作用,而且引用中也没有出现)。总结:1.onload事件需要对状态码进行判断——**正确**2.req.body获取GET请求参数——**错误**(应该用req.query)3.Ajax增强用户体验——**正确**4.application/json数据格式——**正确**5.创建Ajax对象的方式——**正确**(指`newXMLHttpRequest()`)6.ajax()函数参数传递方式——**正确**(指通过配置对象传递)7.Object.assign方法的作用——**错误**(题目中没有提及在Ajax中的作用,且引用中没有)注意:第6点的`ajax()`函数通常指jQuery中的函数,因为原生的XMLHttpRequest并没有一个叫做`ajax()`的函数。根据用户要求,我们需要生成相关问题。我们将生成与Ajax技术相关的问题。§§相关问题§§1.Ajax请求中,如何正确处理HTTP状态码以确保请求成功?2.在Express框架中,如何分别获取GET请求POST请求的参数?3.Ajax技术如何实现页面局部更新从而提升用户体验?请举例说明。4.如何在Ajax请求中设置请求头以发送JSON格式的数据?5.除了XMLHttpRequest,还有哪些方式可以实现Ajax请求?6.在jQuery的`$.ajax()`方法中,如何设置请求参数回调函数?7.在JavaScript中,Object.assign方法通常用于什么场景?它Ajax有直接关联吗?</think> ### 关于Ajax技术说法的判断 #### 1. **onload事件需要对状态码进行判断** ✅ 正确 在`onload`事件中必须判断`status`状态码(如200),因为即使请求完成(`readyState=4`)也可能返回错误状态(如404/500)。引用[2][3][5]中的示例均未展示状态码判断,但在实际开发中必须添加: ```javascript xhr.onload = function() { if (xhr.status === 200) { // 必须检查状态码 console.log(xhr.responseText); } } ``` #### 2. **req.body获取GET请求参数** ❌ 错误 GET请求参数通过URL传递,服务器应使用`req.query`获取(如Express框架)[^1]。`req.body`用于解析POST请求的请求体数据(如JSON格式)[^1]。 **正确方式**: ```javascript // 客户端GET请求(引用[5]) aj.open('get', 'http://localhost:3000/get?' + params); // 服务端Express app.get('/get', (req, res) => { const username = req.query.username; // ✅ 正确 // 错误:req.body.username ❌ }) ``` #### 3. **Ajax增强用户体验** ✅ 正确 Ajax通过异步通信实现页面局部更新,避免整页刷新,显著提升交互流畅度(如表单提交后即时显示结果)[^1][^3]。 #### 4. **application/json数据格式** ✅ 正确 当POST请求发送JSON数据时,必须设置请求头: ```javascript // 引用[4] xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ username: "Alice" })); ``` #### 5. **创建Ajax对象的方式** ✅ 正确 标准创建方式均为`new XMLHttpRequest()`,引用[2][3][5]均验证此写法: ```javascript const xhr = new XMLHttpRequest(); // ✅ ``` #### 6. **ajax()函数参数传递方式** ✅ 正确 jQuery的`$.ajax()`通过配置对象传递参数: ```javascript $.ajax({ type: 'POST', // 请求方法 url: '/api/data', // URL data: { id: 123 }, // 参数 dataType: 'json' // 响应格式 }); ``` #### 7. **Object.assign方法的作用** ❌ 错误(无关Ajax) `Object.assign`用于合并JavaScript对象,与Ajax无关: ```javascript const obj = Object.assign({}, {a:1}, {b:2}); // 输出 {a:1, b:2} ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值