ajax中data写法(前端(jq)、数据库、node.js)

**~~**最近学习用jq完成数据库node.js之间传输数据,经常搞不清如何正确的去书写客户端(HTML页面)传输到后台(node.js)data属性正确的写法,就总结了一下。

通常上在HTML页面上书写ajax时,会需要将页面上获得数据传输到后台处理,于是对于如何正确传输data数据就非常重要。主要是方法得当,其实有很多方法都可以。
一、先了解一下ajax请求传递data数据的三种格式
1.json对象格式(post和get):

   {"loginpwd":”woxihuan“},

这种方式需要指定一下 datatype:“JSON”,

 $.ajax({
    type: "post",
      url: "http://localhost:8080/toPwd",
      data: {"loginpwd":"woxihuan"},
      datatype:"JSON",// //指定响应的data数据类型为JSON对象。
      success: function (data) ,//这个data是服务器端
      //传输给客户端的,和这篇文章无关,这个data只是一个参数的名字
      		 $("#msg").html(data.msg);
      }
  });
  • dataType:“json”
    用来指定服务器返回的data数据类型必须是JSON类型。然后jQuery就会把后端返回的json字符串尝试通过JSON.parse()解析为js对象。
  • 如果不指定dataType,jQuery 将自动根据 HTTP 包的 MIME信息来智能判断,若MIME信息的值为JSON,则jQuery会自动的把data数据转换成JS对象的json,接着Script把data传递给回调函数进行JS的脚本操作。

2、标准参数模式(post和get):

   data:'loginname=haer & loginpwd=520',
   dataType:"json", 
  • $(“#login”).serialize() 就是把表单的数据拼成这个格式(key1 = value2&key2 =
    value2)的字符串,然后放在Http请求体中传给后台。

3.json字符串(只用于post请求,这种方式不能用于 Get请求):

	//对象转字符串方法
    "{"loginpwd":”woxihuan“}“---JSON对象格式的字符串
    JSON.stringify({"loginpwd":”woxihuan“},----把JSON对象转成JSON格式的字符串。
    //主要添加即可,不用写datatype:"JSON"
	contentType:"json/application"

不能使用get请求的原因:
1、因为此种方式发送的请求,后端必须得用@RequestBody进行接收,且接收的是Http请求体中的数据,Get请求没有请求体。
2、而且此方式的Ajax 必须要添加 contentType:”json/application”这个字段信息。

  • GET请求,则会把data的数据 附加在 URL 后,
  • POST请求,则就会把data的数据 放在请求体中。
  • dataType:指定服务器端返回的数据类型。
  • 若不指定,且后端返回的是Json,前端就会自动识别返回的数据是JSON。

以上参考文章:ajax请求传递data数据格式,部分为个人修改,侵权必删https://blog.csdn.net/qq_38737586/article/details/96578039

二、ajax属性传值方式主要写法总结:

1.:属性加引号的直接写法

 data: {"loginpwd":loginpwd},

2.:属性不加加引号的直接写法

 data: {loginpwd:loginpwd},

3.:拼接数据的写法,这种方法不需要加{}

 data: 'loginpwd='+loginpwd+'&loginname='+loginname,

4.序列化方式,这种方法不需要加{}

 data: $("#loginpwd").serialize(),//(一)中介绍过会转换成(二.3)的格式

5.组装数据,然后赋值给一个变量,在用JSON.stringify(obj)把obj->js对象转化为json字符串,或者直接写json字符串“{‘id’:’s01‘,’name‘:’001‘}”,等同于上面为json对象。

  • JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
var pwd = [{id:s01,name:001}];//数组格式
$.ajax({
      type: "post",
      url: "http://localhost:8080/toPwd",
      data: {
          pwd: JSON.stringify(pwd)//转化为json字符串
      },
      contentType:"json/application",
      success: function (datas) {
          $("#msg").html(datas.msg);
      }
  });

6.上面是目前我遇到的是这几种情况,同时:

  • JSON.parse()将json字符串转化为一个js对象,有需要是可以使用

以上参考来源ajax属性传值方式,侵权必删
https://www.cnblogs.com/tu-0718/p/8370925.html

大部分书写都尝试测验了,以及自我总结
有错请各位纠正!!

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要实现数据库显示到前端页面,可以使用Node.jsAjax技术。 首先,需要在Node.js连接数据库,可以使用Node.js的MySQL模块或者其他数据库模块。连接成功后,可以编写查询语句,将查询结果返回给前端页面。 在前端页面,可以使用Ajax技术向Node.js服务器发送请求,获取数据库查询结果。然后,使用JavaScript将查询结果渲染到页面上。 需要注意的是,为了保证安全性,需要对用户输入进行过滤和验证,防止SQL注入等攻击。 ### 回答2: 在前后端分离的开发,前后端的通信方式一般采用AjaxAjax是一种异步的通信方式,可以在不刷新整个页面的情况下,向服务器请求数据,并将得到的数据展示在前端页面上。 而在服务器端,node.js是一种非常流行的开发工具,可以利用它来实现数据库的操作。 在将数据库显示到前端页面的过程,我们可以利用node.js实现以下步骤: 1. 建立node.js服务器,并连接到数据库。 2. 在服务器端建立API,提供数据的获取接口,以供前端调用。 3. 在前端页面,利用Ajax向服务器请求数据。 4. 服务器收到请求后,连接到数据库,获取数据,并将数据返回给前端。 5. 前端页面利用Ajax接收到服务器返回的数据,并将数据展示在页面上。 需要注意的是,在利用Ajax通信的时候,需要处理跨域问题。一般来说,可以利用cors模块解决跨域问题。 最后,需要注意的是,安全性是非常重要的。在将数据库显示到前端页面的过程,需要注意对数据的合法性进行校验,以免出现安全问题。 ### 回答3: 利用Node.jsAjax能够使得数据库的内容直接显示到前端页面上,这样能够提高网站的交互性和响应速度。下面是实现方法的详细步骤。 1.首先需要下载和安装Node.js,可以从官网(https://nodejs.org/en/)上下载并安装,成功安装后,打开命令行,输入node -v命令进行验证,如果返回Node.js版本号,则表示安装成功。 2.在Node.js应用程序,需要使用某个类库来连接和操作数据库,在这里我们选用MySQL类库,可以通过npm命令安装,具体命令为npm install mysql —save。 3.在Node.js应用程序,需要设置数据库的相关信息,例如连接主机、端口号、数据库名称、用户名和密码等,在这里我们以本地电脑上的数据库为例,代码如下: var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : '123456', database : 'test' }); 4.在Node.js应用程序,需要通过query方法进行SQL语句的执行和结果的查询,例如查询表的所有记录,代码如下: var sql='select * from tablename'; connection.query(sql,function(err,rows,fields){ if(err){ console.log('[query] - :'+err); return; } 5.需要创建一个Ajax函数用于将查询结果返回给前端页面,代码如下: function getdata(){ let xhr = new XMLHttpRequest(); xhr.open("get","/getdata",true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("showdata").innerHTML = xhr.responseText; } }; xhr.send(null); } 6.需要在Node.js应用程序创建路由,返回查询结果,代码如下: app.get('/getdata',function(req,res){ var query = connection.query('SELECT * FROM tablename',function(err,rows){ if(err){ console.log(err); return; } res.send(rows); }) }); 7.最后,在前端页面需要调用Ajax函数并显示查询结果,代码如下: <button onclick="getdata()">查询数据</button> <div id="showdata"></div> 通过以上步骤,就可以将数据库内容显示到前端页面上了,利用Node.jsAjax实现了后台与前端的交互和数据传递,提高了网站的交互性和响应速度。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值