ajax提交，获取后台数据

<body>
<div class=" row" ng-app="myApp" ng-controller="myCtrl">
<ul class="content">
<li class="form-group">
<span class="sign">sign up</span>
</li>
<li class="form-group">
<label for="exampleInputNumber2"><span class="error"></span><span id="leftText">*姓名：</span></label>
<input type="text" class="form-control" id="name" placeholder="汉字" ng-model="form.name" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputNumber1"><span class="error"></span><span id="leftText">*用户名：</span></label>
<input type="text" class="form-control" id="userName" placeholder="三位以上的字符" ng-model="form.userName" maxlength="20">
</li>

<li class="form-group">
<label for="exampleInputNumber3"><span class="error"></span><span id="leftText">*手机号：</span></label>
<input type="text" class="form-control" id="phone" placeholder="number" required ng-model="form.phone" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputNumber4"><span class="error"></span><span id="leftText">*邮箱：</span></label>
<input type="text" class="form-control" id="email" placeholder="@qq.com" required ng-model="form.email" maxlength="20">
</li>
<!--<li class="form-group">
<label class="sex"><span id="leftText">性别：</span></label>
<input class="sex" checked name="sex" type="radio" value="女" ng-model="form.sex" />女
<input name="sex" type="radio" value="男" ng-model="form.sex" />男
</li>-->
<li class="address">
<label><span class="error"></span><span id="leftText">*地址：</span></label>
<select id="selProvince" ng-change="selPro()" ng-model="form.Province" ng-options="x.proID as x.proName for x in province">
<option value="">请选择省份</option>
</select>
<select id="selCit" ng-model="form.City" ng-options="x.cityID as x.cityName for x in selCity">
<option value="">请选择城市</option>
</select>
</li>
<li class="form-group">
<label for="exampleInputPassword1"><span class="error"></span><span id="leftText">*密码：</span></label>
<button id="btn" onclick="password()" title="s">s</button><input type="password" class="form-control" ng-model="form.password" id="password" placeholder="至少三位数字" maxlength="20">
</li>
<li class="form-group">
<label for="exampleInputFile"><span class="error"></span><span id="leftText">*确认密码：</span></label>
<button id="btn1" onclick="password1()" title="s">s</button><input type="password" class="form-control" id="absPassword" ng-model="form.passwordCha" placeholder="Password" onkeyup="validate()" maxlength="20">
<p id="passError"></p>
</li>
<li class="form-group">
<div style="margin-left:10%;">
<input type="button" value="验证" onclick="confirm()" />
<input type="text" id="input" ng-model="form.confirm" />
<input type="button" id="code" onclick="createCode()" />

</div>
</li>
<li class="checkbox form-group">
<label class="box">
<input type="checkbox"> 记住密码
</label>
</li>
<li class="form-group butn">
<input id="reset" type="button" value="重置" ng-click="reseat()" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="button" value="提交" ng-click="click()" />
</li>
<li>
<table >
<tr>
<td>姓名</td>
<td>用户名</td>
<td>手机号</td>
<td>邮箱</td>
<td>地址-省</td>
<td>地址-市</td>
<td>功能</td>
</tr>
<tr ng-repeat="t in userList" ng-cloak>
<td >{{t.NAME}}</td>
<td>{{t.USERNAME}}</td>
<td>{{t.TELPHONE}}</td>
<td>{{t.EMAIL}}</td>
<td>{{t.proName}}</td>
<td>{{t.citName}}</td>
<td><a href="javascript:void(0)" ng-click="edit($index)">修改</a>
<a href="javascript:void(0)" ng-click="delete(t.OID)">删除</a></td>
</tr>

</table>
</li>
</ul>
</div>
</body>
</html>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/JavaScript1.js" type="text/javascript"></script>
<script>
//定义应用
var app = angular.module(‘myApp‘, []);

//构造工厂类
app.factory(‘PublicFactory‘, [‘$http‘, function ($http) {
var factory = {};
//获取数据方法
factory.GetList = function () {
return $http.get(GetAPiRootPath() + ‘/api/baseuserinfo/GetUserInfoByCreater?ct=json&creater=hnn‘, null);
}
//保存方法,删除方法同理
factory.PostUserInfoSave = function (model) {
return $http.post(GetAPiRootPath() + ‘/api/baseuserinfo/PostUserInfoSave?ct=json‘, { PostData: JSON.stringify(model) });
}
//删除
factory.PostUserInfoDelete = function (OID) {
return $http.post(GetAPiRootPath() + ‘/api/baseuserinfo/DeleteUserInfoSave?ct=json‘, { PostData: OID });
}
return factory;
}]);

//定义控制器
app.controller(‘myCtrl‘, [‘$scope‘, ‘PublicFactory‘, function ($scope, PublicFactory) { // BusinessService为工厂类的注入
$scope.userList = [];
$scope.form = {};
$scope.user = {};
$scope.province = [
{ "proID": 1, "proName": "河北省" },
{ "proID": 2, "proName": "湖南省" },
{ "proID": 3, "proName": "河南省" }];
$scope.city = [
{ "cityID": 1, "cityName": "石家庄", "proID": 1 },
{ "cityID": 2, "cityName": "长沙市", "proID": 2 },
{ "cityID": 3, "cityName": "郑州市", "proID": 3 },
{ "cityID": 4, "cityName": "南阳市", "proID": 3 },
{ "cityID": 5, "cityName": "驻马店市", "proID": 3 }];
var handleList = function (data) {
//console.log(data); //将内容输出到控制台上
//data = eval(data);
//去除双引号，把字符串转化为数组
$scope.userList = data;
//省

for (var i = 0; i < data.length; i++) {
for (var j = 0; j < $scope.province.length; j++) {
if (data[i].PROVINCE == $scope.province[j].proID) {
data[i].proName = $scope.province[j].proName;
break;
}
}
for (var j = 0; j < $scope.city.length; j++) {
if (data[i].CITY == $scope.city[j].cityID) {
data[i].citName = $scope.city[j].cityName;
break;
}
}
}

}
PublicFactory.GetList().success(handleList);
//联动
$scope.selPro = function () {

$scope.selCity = [];
for (var i = 0; i < $scope.city.length; i++) {
if ($scope.city[i].proID == $scope.form.Province) {
$scope.selCity.push($scope.city[i]);
}
}
}
//方法
$scope.borde = function () {
$(‘#name‘).css({
‘border‘: ‘1px solid #ccc‘,
});
$(‘#userName‘).css({
‘border‘: ‘1px solid #ccc‘,
});
$(‘#absPassword‘).css({
‘border‘: ‘1px solid #ccc‘,
});
$(‘#phone‘).css({
‘border‘: ‘1px solid #ccc‘,
});
$(‘#email‘).css({
‘border‘: ‘1px solid #ccc‘,
});
$(‘#password‘).css({
‘border‘: ‘1px solid #ccc‘,
});
}
//提交
$scope.click = function () {

if ($scope.form.name != ‘‘ && $scope.form.userName != ‘‘ && $scope.form.phone != ‘‘ && $scope.form.email != ‘‘ && $scope.form.Province != ‘‘ && $scope.form.password != ‘‘ && $scope.form.City != ‘‘) {
PublicFactory.GetList().success(handleList);
var json = {
OID: $scope.user.OID,
NAME: $scope.form.name,
USERNAME: $scope.form.userName,
TELPHONE: $scope.form.phone,
EMAIL: $scope.form.email,
PROVINCE: $scope.form.Province,
CITY: $scope.form.City,
PASSWORD: $scope.form.password,
CREATER: ‘hnn‘
};
PublicFactory.PostUserInfoSave(json);
//PublicFactory.PostUserInfoSave($scope.form);
PublicFactory.GetList().success(handleList);
$scope.form = {};
$scope.borde();
}

}
//重置
$scope.reseat = function () {
$scope.form = {};
$scope.borde();

}
//修改
PublicFactory.GetList().success(handleList);
$scope.edit = function (index) {
// debugger

//userList数组，user对象
$scope.user = $scope.userList[index];

$scope.form.name = $scope.user.NAME;
$scope.form.userName = $scope.user.USERNAME;
$scope.form.phone = $scope.user.TELPHONE;
$scope.form.email = $scope.user.EMAIL;
$scope.form.Province = Number($scope.user.PROVINCE);
$scope.form.City =Number( $scope.user.CITY);
$scope.form.password = $scope.user.PASSWORD;

$scope.selPro();

}
//删除
$scope.delete = function (OID) {
PublicFactory.GetList().success(handleList);
PublicFactory.PostUserInfoDelete(OID);
PublicFactory.GetList().success(handleList);
}
}]);

//获取当前主机地址的方法
var GetAPiRootPath = function () {
//获取当前网址，如： http://localhost:8080/ems/Pages/Basic/Person.js
var curWwwPath = window.document.location.href;
//获取主机地址之后的目录，如： /ems/Pages/Basic/Person.js
var pathName = window.document.location.pathname;
var pos = curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8080
var localhostPath = curWwwPath.substring(0, pos);
return localhostPath;
};
</script>

时间： 2024-10-26 12:05:31

ajax提交，获取后台数据的相关文章

关于上传文件 非ajax提交 得到后台数据问题

<form name="configForm" id="configForm" method="post" action="" > .......... </form> 根据id获得表单数据然后发送ajax请求,获得后台返回数据,处理数据,完美. 但是如果需要上传文件, <tr> <td class="fontSize">请选择文件:</td> &

前台通过ajax获取后台数据，PHP如何返回中文数据

现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: echo urldecode(json_encode(array('status'=>'1', 'errMsg'=>urlencode('数据传递错误,请重试')))); return;

用ajax获取后台数据，返回json数据，怎么在前台使用？

用ajax获取后台数据,返回json数据,怎么在前台使用呢? 后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == "SearchCustomer")                 {                     int ID;                     if (Int32.TryParse(CustomerID, out ID))                     {    

Java语言实现通过Ajax抓取后台数据及图片

1.Java语言实现通过Ajax抓取后台数据及图片信息 1.1数据库设计 create table picture( pic_id number not null, pic_name varchar(200)not null, pic_url varchar2(200) not null, pic_descp varchar2(200) not null, pic_price varchar2(200) not null ) insert into picture values(1 ,'小米5s

spring ajax提交并返回数据方式

jsp $('#userId').change(function() { $.ajax({ url: "${ctx}/test/checkUser.do", contentType: "application/json;charset=utf-8", type: "get", data:{ userId:$("#userId").val() }, success: function(data) { if(data!=''){

Ajax异步获取html数据中包含js方法无效的解决方法

页面上使用js写了一个获取后台数据的方法 function data() { var tab = $("#dic") $.ajax({ url: '../demo.ashx?method=GetList', data: {}, dataType: 'json', type: 'post', async: true, success: function (data) { //console.log(data); var parentStr = ''; $.each(data, funct

ajax请求得到后台数据，前台页面不用拼接 “字符串和HTML表格标签”，使用方便模板然后clone，显示表格

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

spring mvc接收ajax提交的JSON数据，并反序列化为对象

需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; $.ajax({ url: "/book/adddata", type: "POST", dataType: 'json', //必需设定,后台@RequestBody会根据它做数据反序列化 contentType:"application/json&quo

ajax请求到后台数据，前台不用拼接字符串，一样显示到页面

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

jquery通过ajax方法获取json数据不执行success

1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述3个标准写法:      1)键名称:用双引号括起:    2)字符串:用双引号括起:    3)数字,布尔值不需要使用双引号括起 : 注意:一定是双括号! 2.jQuery中ajax使用json数据类型总是跳过success