如何将标签正则表达式与 ajax 一起使用?
how to use hashtag regex with ajax?
我已经在 base.html 中添加了标签,它正在运行。就像如果有人用 #something 键入内容,它将替换为带有链接的 html 中的 javascript。它正在处理 post 列表。所以我想在评论中处理它。但是评论有 ajax 方法,这就是为什么它在评论中不起作用的原因。我们可以同时保留它们吗(AJAX 和 Hashtag)。
我的base.html:
$(document).ready(function() {
$("p").each(function(data) {
var strText = $(this).html();
console.log('1. strText=', strText);
var arrElems = strText.match(/@[a-zA-Z0-9]+/g);
console.log('arrElems=', arrElems);
$.each(arrElems, function(index, value){
strText = strText.toString().replace(value, '<a href="/user/'+value.replace('@', '')+'">'+value+'</a>');
});
console.log('2. strText=', strText);
$(this).html(strText);
});
});
(#the ajax method for comments)
$(document).on('submit', '.comment-form', function(event){
event.preventDefault();
console.log($(this).serialize());
$("p").each(function(data) {
var strText = $(this).html();
console.log('1. strText=', strText);
var arrElems = strText.match(/@[a-zA-Z0-9]+/g);
console.log('arrElems=', arrElems);
$.each(arrElems, function(index, value){
strText = strText.toString().replace(value, '<a href="/user/'+value.replace('@', '')+'">'+value+'</a>');
});
console.log('2. strText=', strText);
$(this).html(strText);
});
});
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $(this).serialize(),
dataType: 'Json',
success: function(response) {
$('.main-comment-section').html(response['form']);
$('textarea').val('');
$('.reply-btn').click(function() {
$(this).parent().parent().next('.replied-comments').fadeToggle()
$('textarea').val('');
});
},
error: function(rs, e) {
console.log(rs.responseText)
},
});
});
我的comments.html:
<form method="post" enctype="multipart/form-data" class="comment-form" action=".">
{% csrf_token %}
{{ comment_form.as_p }}
<input type="submit" value="submit" class="btn-btn-outline-success">
</form>
<div class="container">
{{ comments.count }} comment{{ comments|pluralize }}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{ comment.content }}</p>
<div class="options">
{% if comment.user == user %}
<a href="{% url 'comment-delete' pk=comment.pk %}">delete</a>
{% endif %}
</div>
<footer class="blockquote-footer">by <cite title="Source Title">{{ comment.user }}</cite>
<button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm">reply</button>
</footer>
</blockquote>
<div class="replied-comments container mt-2" style="display:none;">
{% for reply in comment.replies.all %}
<blockquote class="blockquote">
<p class="mb-0"><small>{{ reply.content }}</small></p>
<footer class="blockquote-footer"><small>by <cite title="Source Title">{{ reply.user }}</cite></small></footer>
</blockquote>
{% endfor %}
<div class="form-group-row">
<form method="post" class="reply-form" action="." enctype='multipart/form-data'>
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
{{ comment_form.as_p }}
<input type="submit" value="submit" class="btn-btn-outline-success">
</form>
</div>
</div>
{% endfor %}
ajax 方法引发错误,例如 ajax 不起作用,主题标签不起作用。
好吧,我只需要将脚本放入 comments.html 而不是 base.html。
我已经在 base.html 中添加了标签,它正在运行。就像如果有人用 #something 键入内容,它将替换为带有链接的 html 中的 javascript。它正在处理 post 列表。所以我想在评论中处理它。但是评论有 ajax 方法,这就是为什么它在评论中不起作用的原因。我们可以同时保留它们吗(AJAX 和 Hashtag)。
我的base.html:
$(document).ready(function() {
$("p").each(function(data) {
var strText = $(this).html();
console.log('1. strText=', strText);
var arrElems = strText.match(/@[a-zA-Z0-9]+/g);
console.log('arrElems=', arrElems);
$.each(arrElems, function(index, value){
strText = strText.toString().replace(value, '<a href="/user/'+value.replace('@', '')+'">'+value+'</a>');
});
console.log('2. strText=', strText);
$(this).html(strText);
});
});
(#the ajax method for comments)
$(document).on('submit', '.comment-form', function(event){
event.preventDefault();
console.log($(this).serialize());
$("p").each(function(data) {
var strText = $(this).html();
console.log('1. strText=', strText);
var arrElems = strText.match(/@[a-zA-Z0-9]+/g);
console.log('arrElems=', arrElems);
$.each(arrElems, function(index, value){
strText = strText.toString().replace(value, '<a href="/user/'+value.replace('@', '')+'">'+value+'</a>');
});
console.log('2. strText=', strText);
$(this).html(strText);
});
});
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $(this).serialize(),
dataType: 'Json',
success: function(response) {
$('.main-comment-section').html(response['form']);
$('textarea').val('');
$('.reply-btn').click(function() {
$(this).parent().parent().next('.replied-comments').fadeToggle()
$('textarea').val('');
});
},
error: function(rs, e) {
console.log(rs.responseText)
},
});
});
我的comments.html:
<form method="post" enctype="multipart/form-data" class="comment-form" action=".">
{% csrf_token %}
{{ comment_form.as_p }}
<input type="submit" value="submit" class="btn-btn-outline-success">
</form>
<div class="container">
{{ comments.count }} comment{{ comments|pluralize }}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{ comment.content }}</p>
<div class="options">
{% if comment.user == user %}
<a href="{% url 'comment-delete' pk=comment.pk %}">delete</a>
{% endif %}
</div>
<footer class="blockquote-footer">by <cite title="Source Title">{{ comment.user }}</cite>
<button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm">reply</button>
</footer>
</blockquote>
<div class="replied-comments container mt-2" style="display:none;">
{% for reply in comment.replies.all %}
<blockquote class="blockquote">
<p class="mb-0"><small>{{ reply.content }}</small></p>
<footer class="blockquote-footer"><small>by <cite title="Source Title">{{ reply.user }}</cite></small></footer>
</blockquote>
{% endfor %}
<div class="form-group-row">
<form method="post" class="reply-form" action="." enctype='multipart/form-data'>
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
{{ comment_form.as_p }}
<input type="submit" value="submit" class="btn-btn-outline-success">
</form>
</div>
</div>
{% endfor %}
ajax 方法引发错误,例如 ajax 不起作用,主题标签不起作用。
好吧,我只需要将脚本放入 comments.html 而不是 base.html。