[英]How to send a query from the frontend (React) to Django with Rest Framework
i want to receive a particular input from the frontend react textarea to perform a certain function in django backend.我想从前端反应文本区域接收特定输入,以在 django 后端执行某个 function。 Anybody to help.任何人来帮助。 i want to send a input's value from the textarea input field to my backend我想将输入值从 textarea 输入字段发送到我的后端
Here is my React Frontend Code这是我的 React 前端代码
import React, { Component } from 'react';
import axios from 'axios';
class QueryBuilder extends Component{
render() {
return (
<div>
<form>
<textarea cols="100" rows="20" name="text" />
<br /><br />
<button>Execute Query</button>
</form>
</div>
)
}
}
export default QueryBuilder;
Here is the views.py code这是views.py代码
from django import db
from django.shortcuts import render, HttpResponse
from rest_framework import generics
from .models import Test
from .serializers import TestSerializer
from pymongo import MongoClient
from ast import literal_eval
from rest_framework import viewsets, permissions
# from .models import Test
# from .serializers import TestSerializer
#Test Viewset
class TestViewset(viewsets.ModelViewSet):
client = MongoClient()
db = client.test
# collect = db['state_entry'].find({})
queryset = db['queryTest_test'].find({})
permission_classes = [
permissions.AllowAny
]
serializer_class = TestSerializer
Serializer.py序列化程序.py
from rest_framework import serializers
from queryTest.models import Test
# Test Serializers
class TestSerializer(serializers.ModelSerializer):
class Meta:
model = Test
fields = '__all__'
Update your react component code to this, i see you have imported axios but havent't used it to make api call, You should definitely checkout axios official documentation , very useful package Update your react component code to this, i see you have imported axios but havent't used it to make api call, You should definitely checkout axios official documentation , very useful package
import React, { Component } from "react";
import axios from "axios";
class App extends Component {
constructor() {
this.state({
textAreaValue: "",
});
}
api_call = (data) =>
axios
.post(`http://127.0.0.1:8000/your-api-path`, {
value_to_send: data,
})
.then(function (response) {
console.log(response);
this.setState({textAreaValue:''});
})
.catch(function (error) {
console.log(error);
});
render() {
return (
<div>
<textarea
onChange={(e) => this.setState({textAreaValue: e.target.value})}
value={this.state.textAreaValue}
/>
<button onClick={() => this.api_call(this.state.textAreaValue)}>Click it</button>
</div>
);
}
}
export default App;
Update your viewset to this ie use self.request.data received in api request将您的视图集更新为此,即使用在 api 请求中收到的 self.request.data
from django import db
from django.shortcuts import render, HttpResponse
from rest_framework import generics
from .models import Test
from .serializers import TestSerializer
from pymongo import MongoClient
from ast import literal_eval
from rest_framework import viewsets, permissions
# from .models import Test
# from .serializers import TestSerializer
#Test Viewset
class TestViewset(viewsets.ModelViewSet):
request_data = request.data
print(request_data)
client = MongoClient()
db = client.test
# collect = db['state_entry'].find({})
queryset = db['queryTest_test'].find({})
permission_classes = [
permissions.AllowAny
]
serializer_class = TestSerializer
Have a look at django request/response docs here在此处查看 django 请求/响应文档
Checkout this answer here for a similar requirement in backend. 在此处查看此答案以了解后端的类似要求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.