Ajax实现前后端交互

最新推荐文章于 2024-03-18 23:19:39 发布

Pluto372

最新推荐文章于 2024-03-18 23:19:39 发布

阅读量982

点赞数 4

文章标签： jquery java

本文链接：https://blog.csdn.net/Pluto372/article/details/111626241

版权

需求一：

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

后端代码（ssm框架）：

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

    <!-- json依赖 -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.6</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>2.9.6</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.6</version>
    </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>
<!--  查询首页的文章列表(分页查询，只想显示5条)-->
  <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">
<!--        <li><i><a href="/"><img src="img/背景.jpg"></a></i>-->
<!--            <h3><a href="/" target="_blank">快速排序</a>-->
<!--            </h3>-->
<!--            <p>-->
<!--               摘要内容</p>-->
<!--            <time style="font-size: 12px">-->
<!--                2020.11.25		  　-->
<!--            </time>-->
<!--        </li>-->
   </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=`<li>
                            <i><a href="art.html?artid=`+data[i].artid+`"><img src="`+config.serverurl+data[i].artimg+`"></a></i>
                            <h3><a href="art.html?artid=`+data[i].artid+`" target="_blank">`+data[i].arttitle+`</a></h3>
                            <p>`+data[i].artsummary+`</p>
                            <time style="font-size: 12px">`+formartdate(new Date(data[i].artpublishtime))+`</time>
                    </li>`;
                $("#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>
<!--  查询首页的文章列表(分页查询，只想显示5条)-->
  <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>
    <!--  通过id查询文章详情-->
    <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代码块中拼接超链接
示例如下
<a href="art.html?artid=xxxxx">
最终写法：
<a href="art.html?artid=`+data[i].artid+`">

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

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 = `<div class="newsview">
                                    <h3 class="news_title">`+ data.arttitle +`</h3>
                              <div class="bloginfo">
                                <ul>
                                    <li class="author">` + data.artauthor + `</li>
                                    <li class="lmname">` + data.artsource + `</li>
                                    <li class="timer">` + formartdate(new Date(data.artpublishtime)) + `</li>
                                </ul>
                                </div>
                                <br>
                                 <div class="news_con">` + data.artcontent + `</div>

                        </div>`;
                    $("#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语句

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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<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编写，和前边的类似。

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

Pluto372

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
Ajax实现前后端交互

需求一：从数据库中查询文章列表，显示到html页面中后端代码（ssm框架）：省略了pojo层的JavaBean引入json依赖  <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version
复制链接

扫一扫