web通过Ajax连接服务器

一、jQuery代码：

添加jQuery代码连接远程服务器：

/*注册功能的实现*/$("#register-finish").click(function() {     //输入账号密码后点击登录按钮触发事件$.ajax({url:'http://localhost:8888/user/register.do',   //此处端口号自行设置，例如8380；type: 'post',data: {"username":$("#studentno").val(),"password":$("#password").val(),"email":$("#email").val(),"phone":$("#tel").val(),"question":$("#question").val(),"answer":$("#answer").val(),},/*success为数据成功传到服务器之后发生的事件，data参数为服务器返回的data*/success:function(data){if (data.status === 0) {alert(data.data);/*注册成功后隐藏注册弹窗*/$(".register").hide();}else {alert(data.msg)}},})});

/*登录功能的实现*/$("#login-finish").click(function() {          //输入账号密码后点击登录按钮触发事件var name = $("#username").val();$.ajax({url: 'http://localhost:8888/user/login.do',type: 'post',data: {"username": $("#username").val(),"password":$("#pwd").val()},success:function(data){if (data.status === 0) {alert("登录成功");/*登录成功后隐藏登录弹窗和登录注册*/$(".login").hide();$("#login").hide();$("#loginimg").hide();$("#register").hide();$("#registerimg").hide();/*登录成功后显示用户名*/$("#loginSuccess").text(" "+name);$("#loginSuccessimg").show();$("#loginSuccess").show();}else {alert(data.msg)}console.log(data.msg)  //方便调试用的，可以不加}})});

即当用户点击登录后，客户端将输入框内的账号密码以键值对的形式存入data中，之后将此data发送给服务器，之后服务器根据key进行匹配，如果匹配正确，则返回的data中status为0，否则为1且data.msg为"密码错误"。详情可以看老师发的图。是

二、写好代码之后不管了，开始下载相应软件

第一个软件：Tomcat——web应用服务器，可利用它响应HTML页面的访问请求
下载完成之后，直接解压
第一步：找到目录文件下的conf文件夹，找到server.xml文件，用记事本打开，找到第69行的port改为你在代码里面设置的端口号，之后保存退出。第二步：返回主目录，找到webapps文件夹，进入之后，把你的项目放进这个文件夹，比如我把项目复制进去了，之后改了名字叫school。第三步：等会讲，接下来下载fiddler。

第二个软件：Fiddler——起代理作用，跨域，让我们能访问老师的服务器
第一步：打开fiddler，点击自动回复器，点击添加规则，在下方输入规则编辑器，保存。（千万记住选中那两个框）
这里结束之后，就可以去Tomcat目录中，找到bin文件夹，进入其中找到startup双击即可启动，Tomcat每次只能启动一次，所以重新启动的时候记得把上一次的关掉

三、启动浏览器调试

使用Chrome浏览器，输入webapps内作业的地址之后就可以进行调试啦，判断有没有成功连接服务器，一可以F12开发者模式进行调试，前提是要在代码里面添加了console.log()，另一种方法是在fiddler里面点击检查，再点击web表单我这里因为还没有开始注册时返回密码错误，状态码为0，但因为我接收到了服务器返回的data.status=1,data.msg=“密码错误”,所以证明我成功连接服务器，当然，如果之前的代码已经写好，也可以从浏览器的弹窗判断。

完成以上步骤就基本没什么问题了，可能有些地方有的电脑需要修改一些配置，有问题可以问。