使用jQuery实现从控制器获取数据

之前我们写了简单的get提交和post提交，之后又写了post通过XMLHTTPRequest对象提交表单，这次我们就从控制器获取数据，把数据获取到表单上，先把之前的表单设置复制过来，开始操作

首先我们先来创建一个表单，先给一个div标签，这个表单里面需要有输入姓名、选择性别以及填写地址的input文本框、select下拉框和textarea文本框，还有几个button按钮就差不多了，然后在div标签中放入一个form表单，再在form表单中放入四个div标签，这四个div分别用来姓名和输入姓名的文本框、性别与性别的下拉框、地址与地址的文本框和几个button按钮
然后还需要给他们设置css样式，这里我就不一个一个去给他们设置样式了，我们直接引入bootstrap的css插件，然后直接去调用插件里写好了的样式，然后我们给最大的div盒子设置类class为container和mt-5，这个container是调用插件所必须要的，然后我们这个最大的盒子就会居中显示，接着再去那四个div都设置类class为form-group和form-row这两个就好，然后再去给每个label标签添加类class为col-form-label、col-3以及text-center，这样label标签就占了一行的三份，并且label里面的内容居中，然后三个label的内容分别为姓名、性别、地址
接着再给input标签、select标签以及text area标签都设置类为form-control、col-9，这样输入框就占了九份，另外还需要给他们都设置name属性以及ID，name属性分别为name、sex、address，id分别为txtName、cobSex、txtAddress，最后再去给button按钮设置type属性，前三个type属性的值就为button，最后一个的type属性值为reset，所以前三个为普通的按钮，最后一个为重置按钮，再给第一个按钮添加类为btn、btn-outline-primary、offset-3、mr-2，再添加一个id为Ajax，这样设置的目的是让第一个按钮的颜色为蓝色，让按钮从第四份的位置开始排并且让按钮有一个右外边距不紧挨着，然后给其他的几个按钮换个颜色并且有右外边距就行了，来看下样子：

表单设置完了我们就要去写向控制器获取数据的操作了，在这之前我们需要先把相关的bootstrap插件引入，然后再去写整个页面的上一级写获取的内容（内容是自己先在控制器写好的），只需要在上一级写一个函数方法，方法的名称为Index1，方法里的内容只需要两条代码就OK了，就是声明一个字符串形式的变量str来接收一个JSON格式的字符串，字符串里的内容就是我们自己定义的名字、性别及地址，然后再把变量str返回就行了，另外还需要在函数中传入三个参数，就是分别对应的字符串形式的name、sex、address
接着通过ID为Ajax获取到button按钮，并给按钮绑定点击事件，按钮中的内容就为“从控制器获取内容”，然后又是声明一个变量为xjt再创建XMLHTTPRequest对象，创建这个对象还是看浏览器是否支持，有两种方式创建，分别是xjt=new XMLHttpRequest和xjt=new ActiveXObject（“Microsoft.XMLhttp”），创建完之后再通过open（）请求，里面传入三个参数，第一个为请求的类型，第二个参数是文件在服务器的位置（请求的地址），第三个参数true为异步执行，false为同步执行，然后再通过send（）发送请求
然后还有一个onreadystatechange事件，每当readystate属性发生改变时就会调用该函数，在这个事件中还需要通过if语句判断readyState是否等于4和status是否等于200，如果都满足则表示响应已就绪，然后可以在控制台输出数据，可以获得两种不同的响应式数据，通过responseText可以得到字符串形式的响应式数据，而通过responseXML获得XML形式的响应式数据

而我们需要把获取到的数据中的name、sex、address分别赋值给对应的输入框，就需要把Json格式的字符串转化为JS对象，就需要声明一个变量parson来接收通过Json.parse方法将其转化为JS对象，然后可以在控制台输出看一下，接着就通过ID把姓名、性别、地址的输入框获取到，并且把parse.name、parse.sex、parse.address分别赋值给输入框的value值，然后点击获取数据按钮就可以获取到控制器中的数据并显示在输入框内，可以看下面具体的代码：

Mr.Xiong使用jQuery从控制器获取数据相关推荐

jQuery中ajax获取数据赋值给页面
//html代码 <a href="javascript:void(0)" class="cityname" id="{$rr[code]}&q ...
jQuery的ajax获取数据渲染页面
一.ajax的请求方式 post $.ajax({//请求方式type:'POST',//发送请求的地址url:'xxxxxx',//服务器返回的数据类型dataType:'json',//发送到服务 ...
jquery跨域获取数据以及分页
今天做了一个jquery跨域获取josn数据的功能,同时对获取的数据进行分页.看代码: html 代码: 代码 <! DOCTYPE html PUBLIC " -//W3C//DT ...
JQuery通过后台获取数据遍历到前台
做项目中,经常会通过调用后台接口把数据显示到前台页面上来,之前遇到过的问题是,前台页面是用ul+li标签写的,在调用接口调试时发现返回的数据有很多组的,而在前台显示的时候只有一条数据,毋容置疑,一定是 ...
【四二学堂】jquery方式ajax获取数据并渲染页面
var newsData = ''; var mydata = {"pageNum":obj.curr,"pageSize":"5"}; / ...
Mr.Xiong使用jQuery实现一到一百随机数和事件的委派的效果
使用jQuery实现1到100随机数和事件的委派的效果首先我们先来实现1到100随机数的效果老样子我们还是先布局-->再设置样式-->最后再写jQuery实现效果,把这些事情写完后,我 ...
mr.Xiong使用jQuery实现电影排行榜的效果
使用jQuery实现电影排行榜的效果首先我们就要来给电影排行榜布局,先用一个大的盒子来装里面带的内容,再用h2标签包含电影排行榜作为标题,最后再用ul>li(无序列表)标签来装需要显示的图片和 ...
ajax 限制显示条数,jquery通过ajax获取数据，控制显示的数据条数
无标题文档 body { margin:0;} table { border:1px solid #ccc;} td,th { height:26px; font-family:"微软雅黑& ...
vue定时ajax获取数据,vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: new Vue({ el:'#app', data:{data:&qu ...

Mr.Xiong使用jQuery从控制器获取数据

使用jQuery实现从控制器获取数据

Mr.Xiong使用jQuery从控制器获取数据相关推荐

最新文章

热门文章