下面展示一些 内联代码片。
// -------------------$.ajax restful get风格的选择------------------------
$("#restfulget").on('click',function () {
$.ajax({
url:'http://localhost/user',
success:function (data) {
console.log(data);
}
})
})
// -------------------$.ajax restful get 传参 风格的选择------------------------
$("#restfulgetid").on('click',function () {
$.ajax({
url:'http://localhost/user/1',
success:function (data) {
console.log(data);
}
})
})
// -------------------$.ajax restful put 传参 风格的选择------------------------
$("#restfulputid").on('click',function () {
$.ajax({
type:'put',
url:'http://localhost/user/1',
success:function (data) {
console.log(data);
}
})
})
// -------------------$.ajax restful post 传参 风格的选择------------------------
$("#restfulpost").on('click',function () {
$.ajax({
type:'post',
url:'http://localhost/user/2',
success:function (data) {
console.log(data);
}
})
})
// -------------------$.ajax restful delete 传参 风格的选择------------------------
$("#restfuldelete").on('click',function () {
$.ajax({
type:'delete',
url:'http://localhost/user/3',
success:function (data) {
console.log(data);
}
})
})
// ----------------ajaxStart===============
$(document).on('ajaxStart',function(){
alert('ajaxStart是jquery中$.ajax在全局调用之前使用')
})
// ----------------ajaxComplete===============
$(document).on('ajaxComplete',function(){
alert('ajaxComplete是jquery中$.ajax在全局调用之后使用')
})
// ---------------------jquery form string--------------
$("#jquerybutton").on('click',function () {
let jqueryform = $("#jqueryform").serialize()
console.log(jqueryform);
$.ajax({
type:'get',
url:'/jqueryform',
data:jqueryform,
beforeSend:function () {
// alert(12)
},
success:function (data) {
console.log(data);
},
error:function (err) {
console.log(err);
}
})
return false
})
// ---------------------jquery form object--------------
$("#jqueryobj").on('submit',function () {
let jqueryform = $(this).serializeArray()
let obj = {
}
jqueryform.forEach((item,index)=>{
obj[item.name] = item.value
})
$.ajax({
type:'post',
url:'/jqueryform',
data:JSON.stringify(obj),
contentType:'application/json',
success:function (data) {
console.log(data);
},
error:function (err) {
console.log(err);
}
})
return false
})
// ========================jqueryjsonp======================
$("#jqueryjsonp").click(function(){
$.ajax({
url:'http://127.0.0.1:8888/api/private/v1/menus',
data:{
name:'zhangsan'
},
dataType:'jsonp',
success:function (data) {
console.log(data);
}
})
})
// =====================get=====================
let get = document.getElementById("get")
//创建ajax
get.onclick = function () {
let getquery = get.name + '=' + get.value
let xml = new XMLHttpRequest()
xml.open('get','http://localhost/get?'+getquery)
xml.send()
xml.onload = function () {
let contentType = xml.getResponseHeader('Content-Type')
// console.log(contentType);
if (contentType.includes('application/json')) {
console.log(JSON.parse(xml.responseText));
} else{
console.log(xml.responseText);
}
}
}
// ======================post===================
let post = document.getElementById("post")
//创建ajax
post.onclick = function () {
let postbody = post.name + '=' + post.value
let xml = new XMLHttpRequest()
xml.open('post','http://localhost/post')
xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xml.send(postbody)
xml.onload = function () {
let contentType = xml.getResponseHeader('Content-Type')
console.log(contentType);
// console.log(xml.responseText);
console.log(JSON.parse(xml.responseText));
}
}
// // ======================json===================
let json = document.getElementById("json")
json.onclick = function () {
let name = json.name
let value = json.value
let jsonbody = {
name:value
}
let xml = new XMLHttpRequest()
xml.open('post','http://localhost/post')
xml.setRequestHeader('Content-Type','application/json')
xml.send(JSON.stringify(jsonbody))
xml.onload = function () {
console.log(JSON.parse(xml.responseText));
}
}
// ========================封装ajax===================
function ajax (obj) {
let defaults = {
type:'get',
data:{
},
url:'',
success:function(){
},
ContenType:'application/x-www-form-urlencoded',
error:function(){
},
form:null,
}
Object.assign(defaults,obj)
let xml = new XMLHttpRequest()
if(defaults.form){
if(defaults.type == 'post'){
xml.open(defaults.type,defaults.url)
defaults.header = null
// defaults.form.append('age',18)
// defaults.form.set('username','lisi')
// defaults.form.append('username','wangwu')
xml.send(defaults.form)
}else{
alert('请求方式错误')
}
}
else{
let params = ''
for(var key in defaults.data){
params += "&" + key + "=" + defaults.data[key]
}
params = params.slice(1,params.length)
if (defaults.type == 'post') {
xml.open(defaults.type,defaults.url)
xml.setRequestHeader('Content-Type',defaults.header)
if (defaults.header == 'application/json') {
xml.send(JSON.stringify(defaults.data))
}else{
xml.send(params)
}
} else{
xml.open(defaults.type,defaults.url+"?"+params)
xml.send()
}
}
xml.onload = function () {
if (xml.status == 200) {
let contentType = xml.getResponseHeader('Content-Type')
if(contentType.includes('application/json')){
responseText = JSON.parse(xml.responseText)
}else{
responseText = xml.responseText
}
defaults.success(responseText,xml)
} else{
defaults.error(responseText,xml)
}
}
}
let ajaxButton = document.getElementById("ajaxButton")
ajaxButton.onclick = function () {
ajax({
type:'post',
data:{
name:'张三',
age:18
},
url:'http://localhost/post',
success:function(data){
console.log(data);
},
})
}
// ========================封装ajax===================
function ajax (obj) {
let defaults = {
type:'get',
data:{
},
url:'',
success:function(){
},
ContenType:'application/x-www-form-urlencoded',
error:function(){
},
form:null,
}
Object.assign(defaults,obj)
let xml = new XMLHttpRequest()
if(defaults.form){
if(defaults.type == 'post'){
xml.open(defaults.type,defaults.url)
defaults.header = null
// defaults.form.append('age',18)
// defaults.form.set('username','lisi')
// defaults.form.append('username','wangwu')
xml.send(defaults.form)
}else{
alert('请求方式错误')
}
}
else{
let params = ''
for(var key in defaults.data){
params += "&" + key + "=" + defaults.data[key]
}
params = params.slice(1,params.length)
if (defaults.type == 'post') {
xml.open(defaults.type,defaults.url)
xml.setRequestHeader('Content-Type',defaults.header)
if (defaults.header == 'application/json') {
xml.send(JSON.stringify(defaults.data))
}else{
xml.send(params)
}
} else{
xml.open(defaults.type,defaults.url+"?"+params)
xml.send()
}
}
xml.onload = function () {
if (xml.status == 200) {
let contentType = xml.getResponseHeader('Content-Type')
if(contentType.includes('application/json')){
responseText = JSON.parse(xml.responseText)
}else{
responseText = xml.responseText
}
defaults.success(responseText,xml)
} else{
defaults.error(responseText,xml)
}
}
}
let ajaxButton = document.getElementById("ajaxButton")
ajaxButton.onclick = function () {
ajax({
type:'post',
data:{
name:'张三',
age:18
},
url:'http://localhost/post',
success:function(data){
console.log(data);
},
})
}