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=“密码错误”,所以证明我成功连接服务器，当然，如果之前的代码已经写好，也可以从浏览器的弹窗判断。

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