在前端开发中，我们经常需要使用Ajax请求、HTTP POST请求、HTTP GET请求来实现数据的传输。以下是一些基本的示例：
Ajax请求
Ajax请求是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
示例一
function check() {
var sendData ={id:"123456",status:"222"};
$.ajax({
url: 'http://www.ybb.press/getUser',
type:'post',
dataType:'json',
contentType:"application/json",
async:true,
cache:false,
data:JSON.stringify(sendData),
success:function(data) {
alert(data.info)
},
error:function(data) {
alert("认证失败");
}
});
}
示例二
layer.open({
type: 1
,offset: "auto"
,id: 'LAY_demo'
,content: '<div style="padding: 20px 100px;">确认删除?</div>'
,btn: [ '确认', '取消']
,btnAlign: 'c'
,shade: 0.3
,yes: function(){
var sendData ={id:grid.id,user:grid.createUser};
$.ajax({
data: sendData,
url:"http://www.ybb.press/account/delAccount",
dataType: "json",
type: 'POST',
success:function(json) {
layer.msg(json.msg);
$('#table').bootstrapTable('refresh', {url:'account/query'});
}
});
layer.closeAll();
}
,btn2: function(index, layero){
layer.closeAll();
}
});
示例三
$.ajax({
url: 'http://www.ybb.press/your-endpoint',
data: $('#dirForm').serialize(),
dataType: "html",
type: "post",
success: function(result) {
$('#jumpbox').html(result);
$('#jumpbox').modal('show');
}
});
示例四
$(function($) {
$(".reset").click(function() {
$("#search_form :text").val("");
$("#search_form :radio:eq(0)").prop("checked", "checked");
$("#search_form select option:eq(0)").prop("selected", "selected");
});
$(".delete").click(function() {
var userId = $(this).data("userid");
$('#sure_msg_body').html('确定要删除吗？此操作不可逆，请谨慎选择！');
$('#sure_msgbox').modal('show');
$("#sure_btn").unbind("click");
$("#sure_btn").click(function() {
$.ajax({
url: "http://www.ybb.press/delete",
data: {
userId: userId
},
dataType: "json",
type: "post",
success: function(data) {
if (data.status == "1") {
$('#msg_body').html('删除成功');
$('#msgbox').modal('show');
$("#msg_btn").click(function() {
window.location.href = "http://www.ybb.press/userManager/query";
});
} else {
if (typeof data.info == "object") {
$('#msg_body').html(data.info[0].defaultMessage);
$('#msgbox').modal('show');
} else {
$('#msg_body').html(data.info);
$('#msgbox').modal('show');
}
}
}
});
});
});
});
HTTP POST请求
HTTP POST请求是一种向指定资源提交数据的请求，数据被包含在请求体中。POST请求可能会导致新的资源的创建和/或已有资源的修改。
示例一
$.post("http://www.ybb.press/dir/" + dirId + "/delete.msg", function(result) {
$('#jumpbox').html(result);
$('#jumpbox').modal('show');
});
示例二
$("input").keyup(function(){
txt=$("input").val();
$.post("http://www.ybb.press/demo_ajax_gethint.asp",{suggest:txt},function(result){
$("span").html(result);
});
});
JS常用操作
在前端开发中，我们经常需要进行一些常用的操作，如清空表单的值等。
function clearValue(formId){
$("#" +formId+ " input:text").val('');
$("#" +formId+ " input:radio").attr('checked', false);
$("#" +formId+ " input:checkbox").attr('checked', false);
$("#" +formId+ " select").val('');
}
以上就是关于前端Ajax请求、HTTP POST请求、HTTP GET请求的示例的全部内容，希望对您有所帮助。
发表评论 取消回复