$.ajax 加载菜单,jQuery+ajax实现点击左侧菜单，右侧动态加载不同页面的两种方法...

效果图如下

在这里插入图片描述

一、完成整体布局(以下只有左侧菜单以及右侧网页)

二、利用Ajax完成动态刷新

方法一

function loadPage(url) {

$.ajax({

type: "POST",

url: url,

async: true,

dataType: "html",

contentType: 'application/json; charset=utf-8',

success: function (html) {

$('#right').html(html);

//$('#right').load(url);//load函数同样能实现效果

}

});

}

方法二

function loadPage(url) {

var xmlhttp;

if (window.XMLHttpRequest) {

//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

xmlhttp = new XMLHttpRequest();

}

else {

// IE6, IE5 浏览器执行代码

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

$('#right').load(url);

}

}

xmlhttp.open("GET", url, true);

xmlhttp.send();

三、调用函数loadPage，并为其传递参数

添加鼠标点击事件并传入参数地址(相对地址)

四、总结

1.关于$.ajax的使用

参数

type //数据的提交方式：get和post

url  //数据的提交路径

async  //是否支持异步，默认是true

data    //需要提交的数据

dataType  //服务器返回数据的类型，例如html、xml、Json、String等

success    //请求成功后的回调函数

error  //请求失败后的回调函数

2.ajax相比于iframe，布局上ajax更轻巧，用户体验上异步通信速度更快

3.缺点破坏了浏览器后退机制，存在一定安全隐患，浏览器不兼容

————————————————

原文链接：https://blog.csdn.net/qq_40910746/article/details/86597083

https://blog.csdn.net/DecadentF/article/details/77982511

https://blog.csdn.net/qq_38822390/article/details/81014417