Ajax实现前后端交互

需求一：

从数据库中查询文章列表，
显示到html页面中

后端代码（ssm框架）：

省略了pojo层的JavaBean
引入json依赖

    
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-coreartifactId>
      <version>2.9.6version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-annotationsartifactId>
      <version>2.9.6version>
    dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.coregroupId>
      <artifactId>jackson-databindartifactId>
      <version>2.9.6version>
    dependency>
   

1、xml配置文件中编写sql语句

  <resultMap id="BaseResultMap" type="com.zsn.yqx.pojo.ArtManage" >
    <id column="artid" property="artid" jdbcType="VARCHAR" />
    <result column="typeid" property="typeid" jdbcType="VARCHAR" />
    <result column="arttitle" property="arttitle" jdbcType="VARCHAR" />
    <result column="artsummary" property="artsummary" jdbcType="VARCHAR" />
    <result column="artimg" property="artimg" jdbcType="VARCHAR" />
    <result column="artpublishtime" property="artpublishtime" jdbcType="TIMESTAMP" />
    <result column="artauthor" property="artauthor" jdbcType="VARCHAR" />
    <result column="artsource" property="artsource" jdbcType="VARCHAR" />
    <result column="artpublishstate" property="artpublishstate" jdbcType="INTEGER" />
  resultMap>

  <select id="selectArtByIndex" resultMap="BaseResultMap">
    select
    artid, arttitle, artsummary, artimg, artpublishtime
  	from artmanage
  	where artauditstate=1 and artpublishstate=1
  	order by artpublishtime desc limit 0,5
  select>

2、dao层编写

ArtManageMapper.java

public interface ArtManageMapper {
  /**
   * 查询首页的文章列表
   * @param art
   * @return
   */
 List<ArtManage> selectArtByIndex();

3、service层编写

ArtService.java

public interface ArtService {
   /**
   * 查询首页的文章列表
   * @return
   */
  List<ArtManage> selectArtByIndex();
}

ArtServiceImpl.java

@Service
public class ArtServiceImpl implements ArtService {
 	@Autowired
    private ArtManageMapper mapper;
    @Override
    public List<ArtManage> selectArtByIndex() {
        return mapper.selectArtByIndex();
    }

4、Controller层编写

/**
* 前端页面数据交互
*/
@RestController
@RequestMapping("/web")
@CrossOrigin			//跨域使用的注解
public class WebController {
  @Autowired
  private ArtService artservice;
  
  /**
   *首页文章列表
   * @return
   */
  @RequestMapping("/artindex")
  public List<ArtManage> selectArtByIndex(){
      return artservice.selectArtByIndex();
  }
  }

前端代码（html+ajax）：

1、编写config.js

var config = {
   serverurl:"http://localhost:8080/YQXcms/"
}

2、修改我们以前写的html静态页面

在显示文章的地方做修改

   <div class="r_box" id="indexart">









   div>

这个div中就是显示的所有文章内容，每个li标签中包含的是一篇文章。

3、编写ajax代码

注意引入jquery

//当页面加载完毕时执行这个函数
 $(function () {
        indexart();    
    })
//加载文章
 //加载文章
    function indexart() {
        $.ajax({
            type: "get",
            url: config.serverurl+"/web/artindex",
            //success:是成功后的回调方法
            success: function(data){
               // console.log(data);
            for (var i=0;i<data.length;i++){
                var html=`

                            +data[i].artid+`">+config.serverurl+data[i].artimg+`">
                            
+data[i].artid+`" target="_blank">`+data[i].arttitle+`
                            
`+data[i].artsummary+`
                            `+formartdate(new Date(data[i].artpublishtime))+`
                    
`;
                $("#indexart").append(html)
            }
            }
        });
    }

$("#indexart").append(html)我们需要将这段HTML代码通过id选择器，追加到相应位置。

因为我们文章中有发布时间，所以需要对时间格式化

  //格式化日期
    function formartdate(date) {
        var year = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        return year + "-"+m+"-"+d;
    }

以上操作就可以完成我们的需求了。注意后台服务器要保持开启状态，才能查看到文章列表

需求二：

点击单个文章跳转到文章详情，显示文章内容和作者等

需要准备另一个html页面，根据自己需求编写。
步骤和需求一类似，主要思想：通过文章id，将文章内容查询出来。

1、xml配置文件中编写sql语句

  <resultMap id="BaseResultMap" type="com.zsn.yqx.pojo.ArtManage" >
    <id column="artid" property="artid" jdbcType="VARCHAR" />
    <result column="typeid" property="typeid" jdbcType="VARCHAR" />
    <result column="arttitle" property="arttitle" jdbcType="VARCHAR" />
    <result column="artsummary" property="artsummary" jdbcType="VARCHAR" />
    <result column="artimg" property="artimg" jdbcType="VARCHAR" />
    <result column="artpublishtime" property="artpublishtime" jdbcType="TIMESTAMP" />
    <result column="artauthor" property="artauthor" jdbcType="VARCHAR" />
    <result column="artsource" property="artsource" jdbcType="VARCHAR" />
    <result column="artpublishstate" property="artpublishstate" jdbcType="INTEGER" />
  resultMap>

  <select id="selectArtByIndex" resultMap="BaseResultMap">
    select
    artid, arttitle, artsummary, artimg, artpublishtime
  	from artmanage
  	where artauditstate=1 and artpublishstate=1
  	order by artpublishtime desc limit 0,5
  select>
    
    <select id="selectArtById" resultMap="BaseResultMap">
    select
    artid, arttitle, artsummary,artcontent, artpublishtime,artauthor, artsource
  	from artmanage
  	where artid=#{artid}
  select>

2、dao层编写

ArtManageMapper.java

public interface ArtManageMapper {
  /**
   * 查询首页的文章列表
   * @param art
   * @return
   */
 List<ArtManage> selectArtByIndex();
  /**
   * 通过id查询文章
   * @return
   */
  ArtManage selectArtById(String id);

3、service层编写

ArtService.java

public interface ArtService {
   /**
   * 查询首页的文章列表
   * @return
   */
  List<ArtManage> selectArtByIndex();
   /**
   * 通过id查询文章
   * @return
   */
  ArtManage selectArtById(String id);
}

ArtServiceImpl.java

@Service
public class ArtServiceImpl implements ArtService {
 	@Autowired
    private ArtManageMapper mapper;
    @Override
    public List<ArtManage> selectArtByIndex() {
        return mapper.selectArtByIndex();
    }
      @Override
    public ArtManage selectArtById(String id) {
        return mapper.selectArtById(id);
    }
}

4、Controller层编写

/**
* 前端页面数据交互
*/
@RestController
@RequestMapping("/web")
@CrossOrigin			//跨域使用的注解
public class WebController {
  @Autowired
  private ArtService artservice;
  
  /**
   *首页文章列表
   * @return
   */
  @RequestMapping("/artindex")
  public List<ArtManage> selectArtByIndex(){
      return artservice.selectArtByIndex();
  }
     /**
   * 通过id查询文章
   * @return
   */
  @RequestMapping("/art")
  public ArtManage selectArtById(String artid){
      return artservice.selectArtById(artid);
  }
  }

前端代码（html+ajax）：

首页的HTML：在ajax显示文章的HTML代码块中拼接超链接
示例如下

最终写法：

需求一已经写好，可以翻上去看看。

1、文章详情HTML页面

URL地址栏中会以：art.html?artid=10001结尾
我们需要获取 artid: 10001，我们只需要字符串切割就可以

location.search
截取?后边的所有,包括?

art.html中js代码

var search = location.search
        var result = search.substring(1)
        // console.log(result);
        $(function () {
            indexart();
            selectType();
        });
        //加载文章
        function indexart() {
            $.ajax({
                type: "get",
                data: result,
                url: config.serverurl+"/web/art",
                success: function(data) {
                    // console.log(data);
                        var html = `

                                    
`+ data.arttitle +`
                              

                                

                                    
` + data.artauthor + `
                                    
` + data.artsource + `
                                    
` + formartdate(new Date(data.artpublishtime)) + `
                                
                                


` + data.artcontent + `
`;
$("#art").append(html);
}
});
}

原理需求一一样，只是增加了个data。
如果这种切割字符串的方法不行，可以试试下边这个：

var search = location.search;
var str = search.substring(1);
var strs = str.split("=");
var result = {};
result[strs[0]] = strs[1];

    $.ajax({
        type: "get",
        data:  result,
        url: .......后续省略

需求三：HTML留言到数据库

在文本框中留言，点击发布，能存到数据库中，显示留言和上边类似，不在讲解

留言表结构：

1、xml配置文件中编写sql语句

留言的显示可以通过时间前后，这里没有，只是单纯的差出来

<mapper namespace="com.zsn.yqx.dao.MessageMapper" >
  <resultMap id="BaseResultMap" type="com.zsn.yqx.pojo.Message" >
    <id column="messid" property="messid" jdbcType="VARCHAR" />
    <result column="messname" property="messname" jdbcType="VARCHAR" />
    <result column="messtime" property="messtime" jdbcType="TIMESTAMP" />
    <result column="messcontent" property="messcontent" jdbcType="VARCHAR" />
  resultMap>


  <select id="selectMess" resultMap="BaseResultMap">
    select
    messid,messname,messtime,messcontent
    from
    message
  select>


  <insert id="insertMessage" parameterType="com.zsn.yqx.pojo.Message">
    insert into message (messid,messname,messtime,messcontent)
    values (#{messid},#{messname},#{messtime},#{messcontent})
  insert>
mapper>

2、dao层编写

MessageMapper.java

public interface MessageMapper {
  /**
   * 查询留言
   * @return
   */
  List<Message> selectMess();

  /**
   * 插入留言
   * @param message
   * @return
   */
  int insertMessage(Message message);
}

3、service层编写

MessageService .java

public interface MessageService {
  /**
   * 查询留言
   * @return
   */
  List<Message> selectMess();

  /**
   * 插入留言
   * @param message
   * @return
   */
  int insertMessage(Message message);
}

MessageServiceImpl .java

@Service
public class MessageServiceImpl implements MessageService {
    @Autowired
    private MessageMapper mapper;

    @Override
    public List<Message>  selectMess() {
        return mapper.selectMess();
    }

    @Override
    public int insertMessage(Message message) {
        return mapper.insertMessage(message);
    }
}

4、Controller层编写

直接在需求一、二种的Controller层添加
只需要一个查询就可以，当插入数据库时，form表单会自动刷新页面，就会查出数据并显示

/**
* 前端页面数据交互
*/
@RestController
@RequestMapping("/web")
@CrossOrigin			//跨域使用的注解
public class WebController {
  @Autowired
  private ArtService artservice;
  
  /**
   *首页文章列表
   * @return
   */
  @RequestMapping("/artindex")
  public List<ArtManage> selectArtByIndex(){
      return artservice.selectArtByIndex();
  }
     /**
   * 通过id查询文章
   * @return
   */
  @RequestMapping("/art")
  public ArtManage selectArtById(String artid){
      return artservice.selectArtById(artid);
  }
   /**
   * 查询留言
   * @return
   */
  @RequestMapping("/mess")
  public  List<Message> selectMessage(){
      return messService.selectMess();
  }
  }

1、留言HTML页面编写

1、编写form表单

<form method="post" onsubmit="return postAdd()" >
      <div class="pl-textarea">
           <textarea class="pl-post-word" name="messcontent" id="pl-520am-f-saytext" placeholder="写下你想说的，开始我们的对话">textarea>
        div>
      <div class="pl-tools">
        <ul>
          <li onclick="lgyPl.showPickFace(event,0)"><i class="iconfont icon-face">i>li>
          <li onclick="lgyPl.showPickImg(event,0)"><i class="iconfont icon-img">i>li>
          <li class="pl-tools-lastchild"><button type="submit" class="pl-submit-btn" id="pl-submit-btn-main" >发 布button>li>
          <li class="username"><i class="iconfont">i><input type="text" id="pl-username" name="messname" class="pl-key" size="15" placeholder="你的昵称" value="">li>
        ul>
 div>
form>

注意name中的值和数据库表的字段名要一致
2、ajax提交

<script>
    function postAdd() {
       var messcontent = $('textarea[name="messcontent"]').val();
       var messname = $('input[name="messname"]').val();
        $.ajax({
            type: "get",
            url: "http://localhost:8080/YQXcms/message/add",
            data: {
                "messcontent" : messcontent,
                "messname" : messname
            }
        });
    }
</script>

忽略了查询留言的ajax编写，和前边的类似。

希望这篇文章对大家有所帮助