Now that you have done it, you must do it very well. Since Pjax is opened, it is necessary to truly realize the brushless of the whole station.
preface
Before implementing comment Ajax, I also found several tutorials on the Internet and studied them. Most of them are implemented with jQuery, but not every topic will introduce jQuery. Secondly, it is not worth introducing jQuery to implement Ajax. So I choose to implement it in a native way.
Implementation process
First, we need to know what requests the browser initiates and what request messages are when the form is submitted. When commenting, the browser will initiate a POST request. The data in the request body contains the reviewer's information (name, url, mail, text). Note that it is necessary to judge whether the user logs in. If so, there is only text
You can use the value attribute of the dom element to get the data of the user form, and then initiate an ajax request. Request address, which can be obtained from the action attribute on the form. At present, we also need to extract and replace the dom elements in the response message. You can also add some excessive animation and so on. It should be noted that you should not forget to overload some methods and prevent the default submission of events.
The complete code is pasted below
js
1class Comment {
2
3 static comment_init() {
4 const commentsReply = document.querySelectorAll('span.comment_reply > a')
5 const replyForm = document.querySelector('.reply')
6 const isComment = document.querySelector('.post-form.is-comment')
7 for (let el of commentsReply) {
8 el.addEventListener('click', e => {
9 // Get the parent ID for the recover button binding event
10 const href = e.target.getAttribute('href')
11 window.parentId = href.match(/replyTo=(\d+)/)[1]
12 // Pop up reply box
13 replyForm.removeAttribute('style')
14 if (isComment.classList.contains('active')) isComment.classList.remove('active');
15 setTimeout(() => {
16 document.getElementById('cancel-comment-reply-link').addEventListener('click', () => {
17 replyForm.style.display = 'none';
18 })
19 })
20 })
21 }
22 }
23 }
24
25 Comment.comment_init()
26
27 // ajax comment submission implementation method
28
29 // Block default events
30 const form = document.getElementById('comment-form')
31 form.addEventListener('submit', function (e) {
32 e.preventDefault();
33 post_by_ajax(e, '#comment-form')
34 });
35
36 const reply_form = document.querySelector('.reply_form')
37 reply_form.addEventListener('submit', function (e) {
38 e.preventDefault();
39 post_by_ajax(e, '.reply_form', true)
40 });
41
42
43 // ajax submission
44 function post_by_ajax(e, sel, reply = false) {
45 const isComment = document.querySelector('.post-form.is-comment')
46 const commentForm = document.querySelector(sel)
47 const post_url = e.target.getAttribute('action')
48 const cookie = document.cookie
49 const referer = window.location.href
50 const domParser = new DOMParser()
51 const dom = str => domParser.parseFromString(str, 'text/html')
52
53 // If you are an administrator, log in
54 if (!document.querySelector('#comment-form #author')) {
55 const text = commentForm.querySelector('#text').value
56 let data = null
57
58 if (reply) {
59 data = {
60 text, parent: window.parentId
61 }
62 } else {
63 data = {
64 text
65 }
66 }
67 ks.ajax({
68 url: post_url,
69 method: 'POST',
70 data,
71 success(res) {
72 const responseDOM = dom(res.responseText)
73
74 try {
75 isComment.classList.contains('active') ? isComment.classList.remove('active') : false
76 const needPartten = responseDOM.querySelector('.comment-list').innerHTML
77 needPartten === document.querySelector('.comment-list').innerHTML ? ks.notice("Please wait for approval φ(>ω<*) ", {
78 color: "green",
79 time: 1000
80 }) : (document.querySelector('.comment-list').innerHTML = needPartten, ks.notice("The review succeeded (〃'▽'〃)", {
81 color: "green",
82 time: 1000
83 }), (reply ? false : window.scrollSmoothTo(document.body.scrollHeight || document.documentElement.scrollHeight)))
84
85 } catch (e) {
86 ks.notice(responseDOM.querySelector('.container').innerText, {
87 color: "red",
88 time: 1500
89 })
90 }
91 Comment.comment_init()
92 },
93 failed(res) {
94 console.log(res)
95 ks.notice("(；´д｀)ゞ failed", {
96 color: 'red',
97 time: 1500
98 })
99 }
100 })
101 } else {
102 const author = commentForm.querySelector('#author').value
103 const mail = commentForm.querySelector('#mail').value
104 const url = commentForm.querySelector('#url').value
105 const text = commentForm.querySelector('#text').value
106
107 if (reply) {
108 data = {
109 author, mail, url, text, parent: window.parentId
110 }
111 } else {
112 data = {
113 author, mail, url, text,
114 }
115 }
116
117 ks.ajax({
118 method: "POST",
119 url: post_url,
120 data,
121 success(res) {
122 const responseDOM = dom(res.responseText)
123 isComment.classList.contains('active') ? isComment.classList.remove('active') : false
124 try {
125 const needPartten = responseDOM.querySelector('.comment-list').innerHTML
126 needPartten === document.querySelector('.comment-list').innerHTML ? ks.notice("Please wait for approval φ(>ω<*) ", {
127 color: "green",
128 time: 1000
129 }) : (document.querySelector('.comment-list').innerHTML = needPartten, ks.notice("The review succeeded (〃'▽'〃)", {
130 color: "green",
131 time: 1000
132 }), (reply ? false : window.scrollSmoothTo(document.body.scrollHeight || document.documentElement.scrollHeight)))
133 Comment.comment_init()
134 } catch (e) {
135 ks.notice(responseDOM.querySelector('.container').innerText, {
136 color: "red",
137 time: 1500
138 })
139 }
140
141 }
142 ,
143 failed(res) {
144 console.log(res)
145 ks.notice("(；´д｀)ゞ failed", {
146 color: 'red',
147 time: 1500
148 })
149 }
150 })
151
152 }
153 return false
154 }COPY
Follow up notes
After completing the Ajax request, I did two things.
First, judge whether the comment is successful. If it fails, a message box will pop up to explain the reason. If successful, reload the method and jump to the place of new comments by means of smooth movement.
Second, after the comment is successful, withdraw the comment box.
Because Kico Style is used in the project, AJAX requests are made by KS Ajax () implementation, native methods can also be used.
Topics using the above implementation methods: