ajax+bootstrap的常用小组件

200：正常
404:访问的资源不存在 （访问地址输入错误/真的资源没了）
403：没有请求权限
500:服务器代码错了

jquery的资源首先要导入

<script src="路径"/>

-<input type=" " name=" " value=" " id=" " >name是可以和服务器代码对应
id是在jsp中被其他的调用 value是在页面显示的时候

• $("#XX")获取指定id的对象 比如input标签等
• alert("HTML: " + $("#test").html());会显示这个
  -
  回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
  

 function a1(){
           $.ajax({
               url:"${pageContext.request.contextPath}/a1",
               type="POST"||"GET",
               data:{'name':$("#txtName").val()},
               向服务器发送的请求 data传的是对象或者字符串
               data:{'pojo字段名':$("#标签id").val()},
               success:function (data,status) {
                   alert(data);
                   alert(status);
              }
               success:function (服务器返回给前端的数据,服务器的状态) 
          });
      }

• data 指的是浏览器向服务器提交的请求数据
  根据data ：后面接着的传递的类型 有三种
  1.对象格式—但ajax内部也会将对象转换成对应的字符串拼接

  下面的和data:{'name':$("#txtName").val()},一样
  2.直接自己使用字符串形式
  
  3.json形式-----把字符串对象转换成json
  首先ajax有默认的参数类型
  
  我们首先要把data指定为对象变量的json字符串，然后参数的格式类型转换成json

• serializable
  

ajax不会刷新页面

举例：下面是一个点击新增之后会显示的页面
按钮返回这个modal表单

其中的department是经过controller获取到了后台返回的list 已经跳向了其他链接 但是并没有跳转页面 也没有显示全部刷新 而是局部的刷新
1.url没有改动怎么跳转其他页面？
2.url没有变化，如何调用的后台具体的controller？
从前是自己打url 而且要能看到跳转 并且要记住不同的方法的url进行不同方法的跳转 ajax用户体验极好 用户感知不到任何的刷新


可以看到控制台 在点击新增的时候就已经提前获取了保存departlist的json字符串 所以是无url改变 无刷新的提前访问了控制器 来看下具体的ajax代码

新增按钮click事件会先调用get_department();函数 然后再显示模态框

 $("#add_emp_modal_btn").click(function(){
            get_department();
            $('#empAddModal').modal(
                {
                    backdrop:"static"
                });
        })

函数里已经包含了具体要跳转的页面

 function get_department()
        {
            $("#dept_select").empty();
            $.ajax({
                url:"${APP_PATH}/depts",
                type:"GET",
                success:function(result)
                {
                   console.log(result);
                    $.each(result.extend.dept, function () {
                        var optionEle = $("<option></option>").append(this.dname).attr("value", this.departmentid);
                        optionEle.appendTo("#dept_select");
                    });
                }
            });
        }

总的来说ajax的调用不会刷新页面 url咱们也看不到拼接 跳转之类的
都是在内部局部的刷新 所以设计的非常巧妙 要善用每一个function函数
只有$(function)是我们一进入页面就调用的 其他都是被调用。

模态框

通常的使用就是 按钮id触发模态框id

<button class="btn btn-primary" id="add_emp_modal_btn">新增</button>
$("#add_emp_modal_btn").click(function(){
        $('#empAddModal').modal(
            {
                backdrop:"static"
            });
    })

模态框>>>>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

在modal-body中添加具体要加的东西css样式中有表单

单选按钮 Radio

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>

下拉列表

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>