reactjs - 无法从反应方法发送 POST 请求

问题描述

我正在用 Django 创建一个类似 FB 的应用程序并做出反应。在主页上有一个提要，用户可以在其中创建帖子并将其发布到提要中。

我正在尝试实现删除帖子功能，但遇到了一些困难。

逻辑是：用户单击帖子上的删除按钮，浏览器向服务器发送 XMLHttpeRequest 以删除该帖子。

这是反应组件：

class Feed extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      profile_pic: profile_pic_url,
      user: username,
      posts: posts_from_server,
    }
  }

  handleClick() {
    const text = document.querySelector('#new_post_text').value;
    if (text.length > 1) {
      const data = {author: username, text: text}
      // send that post to the server to save it
      const csrftoken = Cookies.get('csrftoken');
      const request = new XMLHttpRequest();
      request.open('POST', '/create_new_post', true);
      request.setRequestHeader('X-CSRFToken', csrftoken);
      request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
      request.onload = () => {
        const response = JSON.parse(request.responseText)
        this.setState({
          posts : [{author: response.author, author_picture: profile_pic_url, text: response.text, date: response.date}, ...this.state.posts]
        })
        document.querySelector("#new_post_text").value = '';
        console.log(response)
      }
      request.send(JSON.stringify(data))
    }
  }

  deletePost(post_id, author) {
    const post = document.getElementById(post_id)
    post.style.animationPlayState = 'running';
    setTimeout(() =>{
      this.setState({
        posts: this.state.posts.filter(post => post.id != post_id)
      })
    }, 1000)

    // delete the post from the server
    const data = {'post_author': author, 'id': post_id}
    const csrftoken = Cookies.get('csrftoken');
    const request = new XMLHttpRequest();
    request.open('POST', '/delete_post', true);
    request.setRequestHeader('X-CSRFToken', csrftoken);
    request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    request.onload = () => {
      response = JSON.parse(request.responseText);
      console.log(response)
    }
    request.send(JSON.stringify(data))
    }

  
  render() {
    return (
      <div>
        <Post_generator 
          current_user={this.state.user}
          picture={this.state.profile_pic}
          onClick={() => this.handleClick()} />

        {this.state.posts.map(post => <Post
          onClick={() => this.deletePost(post.id, post.author)} 
          key={post.id}
          post_id={post.id}
          current_user={this.state.user}
          user={post.author}
          profile_pic={post.author_picture}
          text={post.text}
          date={post.date}  
        />)}
      </div>
    )
  }
}

这是 urls.py：

from django.urls import path
from . import views


urlpatterns = [
    path('', views.index, name='login'),
    path('login', views.login_view, name='login'),
    path('index', views.index, name='index'),
    path('register', views.register_view, name='register'),
    path('logout', views.logout_view, name='logout'),
    path('profile', views.profile, name='profile'),
    path('change_profile_pic', views.change_profile_pic, name='upload_profile_pic'),
    path('create_new_post', views.create_new_post, name='create_new_post'),
    path('<str:friend>', views.friends_profile, name='friends_profile'),
    path('delete_post', views.delete_post_function, name='delete_post'),
]

这些是处理两个请求的views.py中的视图：

@login_required
@require_http_methods(['POST'])
def create_new_post(request):
    data = json.loads(request.body.decode("utf-8"))
    print(data)
    new_post = Post(author=request.user, text=data['text'])
    new_post.save()
    data['date']= new_post.date
    return JsonResponse(data)


# delete post 
@login_required
@require_http_methods(['POST'])
def delete_post_function(request):
    print('sdfgdfsghdsfkgjsdklfg')
    response = {"response": "data arrived to server"}
    return JsonResponse(response)

给我带来麻烦的是 deletePost() 方法......当它执行时，我在控制台中收到 405 错误。

有趣的是，handleClick 方法中的 XMLHTTPRequest 工作得很好

标签： reactjsdjangopostxmlhttprequest

reactjs - 无法从反应方法发送 POST 请求

问题描述

解决方案

推荐阅读