###实现ajax的增删改查案例（jquery)

1. 首先先增加开始,先上静态页面

  学号：<input type="text" value="" id="userid"/><br>
  姓名：<input type="text" value="" id="name"/><br>
  性别：男：<input type="radio" name="sex" value="男">女：<input type="radio" 
  name="sex" value="女"><br>
  年龄：<select id="age">
                      <option value="15">15</option>
                      <option value="16">16</option>
                      <option value="17">17</option>
                      <option value="18">18</option>
              </select><br>
  <input type="button" value="添加" id="btn_1" onclick="add()"/>
  <br>

点击添加按钮调用add方法发送一个ajax请求如下：

function add() {
      var userid = $("#userid").val();
      var name = $("#name").val();
      var sex = $('input[name="sex"]:checked').val();
      var age = $("#age").val();
      var data={  
          "userid":userid,
          "name":name,
          "sex":sex,
          "age":age
      }
      
      $.ajax({
          type : "post",
          url : "demo",//这是你要请求的接口网址，之后所有接口都是随便写的接口
          data : data,//传输的数据，当然传输的数据也可以在url链接后面打个问号传
          cache : true, // 表示浏览器是否缓存被请求页面,默认是 true
          async : true, // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajax里面的代码一起执行
          dataType:"json",   // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
          success: function (data){
              if(data.code == 200){
                  alert("插入成功了");
              }else{
                  alert(data.message);
              }
          },
          error:function () {      
             
              alert('出错了');
          }
          
      });
  }

2.到此增加部分就完成了，接下来是查询部分,话不多说直接上代码：

学号：<input type="text" value="" id="userid_query"/>
  <input type="button" value="查询" id="bt2" onclick="query()"/>
  <table id="queryResult">
      <tr>
          <td>学号</td>
          <td>姓名</td>
          <td>性别</td>
          <td>年龄</td>
      </tr>
      <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
      </tr>
  </table>
  
  
  <br>

点击查询按钮调用query方法发送一个ajax请求如下：

function query() {
        
        var userid_query = $("#userid_query").val();    
        var str = ["学号","姓名","性别","年龄"];
        $.ajax({
            type : "post",
            url : "demoQuery",
            data : {
                "userid_query": userid_query
            },
            cache : true,
            async : true,
            dataType:"json",
            success: function (data){
                //data = $.parseJSON(data);
                var j = 0;
                var x = 1;
                    for(var p in data){//遍历json对象的每个key/value对,p为key
                        console.log(data[p]);
                        if(j == 4) {
                            j = 0;
                            x++;
                        }
                         $("#queryResult tr:eq("+x+") td:eq("+j+")").html(data[p]);
                          console.log(data[p]);
                         j++;
                    }
                
            },
            error:function () {      
               
                alert('出错了');
            }
            
        });
    }

3.接下来是我们的删除部分了，let,go:

//根据学号删除
学号：<input type="text" value="" id="userid_del"/>
    <input type="button" value="删除" id="bt3" onclick="del()"/> 
    <br>

点击删除按钮调用del方法发送一个ajax请求如下：

function del() {
        var userid = $("#userid_del").val();    
        
        $.ajax({
            type : "post",
            url : "demoDelete",
            data : {
                "userid":userid
            },
            cache : true,
            async : true,
            dataType:"json",
            success: function (data){
                if(data.code == 200){
                    alert("删除成功了");
                }else{
                    alert(data.message);
                }
            },
            error:function () {      
               
                alert('出错了’);
              }
        });
    }

4.终于要结束了，最后一个修改功能了，直接上代码：

    学号：<input type="text" value="" id="userid_alter"/><br>
    姓名：<input type="text" value="" id="name_alter"/><br>
    性别：男：<input type="radio" name="sex_alter" value="男">女：<input type="radio" name="sex_alter" value="女"><br>
    年龄：<select id="age_alter">
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
    </select><br>
    <input type="button" value="修改" id="bt4" onclick="alter()"/>



<script>
      function alter() {
        var userid = $("#userid_alter").val();
        var name = $("#name_alter").val();
        var sex = $('input[name="sex_alter"]:checked').val();
        var age = $("#age_alter").val();

        var data={  
            "userid":userid,
            "name":name,
            "sex":sex,
            "age":age
        }
        
        
        $.ajax({
            type : "post",
            url : "demoAlter",
            data : data,
            cache : true,
            async : true,
            dataType:"json",
            success: function (data){
                if(data.code == 200){
                    alert("修改成功了");
                }else{
                    alert(data.message);
                }
            },
            error:function () {      
               
                alert('出错了');
            }
            
        });
    }
</script>

最后附上截图：

image.png

到此就结束了。喜欢给些关注啊。以后会经常更新！