Laravel 与 ajax vanila javascript
我是新使用 laravel，我正在尝试创建一个联系人应用程序来练习。
我如何调用 url 或使用 javascript 路由控制器？，显示我的代码来解释我。我在名为 insertDate 的控制器联系人中创建了新方法。我在视图 save.blade.php 中调用此方法并在主要模板 navs.blade.php 中使用 ajax，此文档位于文件夹布局中，javascript 脚本位于文件夹 public js/ajax.js 中。
控制台导航器，打印错误 404 not found POST，是脚本 url，我如何调用我的控制器或路由的 url？
网页.php
//Routes
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
Route::resource('contactos', 'Contacts');
Route::post('contactos', 'Contacts@insertDate')->name('contacts.insertDate');
联系人控制器
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Contact;
class Contacts extends Controller
{
public function __construct(){
//$this->middleware('auth');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
$ejemplo = 'Prueba';
$hola = 'pepito es pepa';
return view('save', compact('ejemplo', 'hola'));
}
public function insertDate(Request $request)
{
if($request->ajax()){
$contact = new Contact;
$contact->name = $request->name;
$contact->phone = $request->phone;
$contact->save();
}
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
控制台导航器，打印错误 404 not found POST，是脚本 url，我如何调用我的控制器或路由的 url？
呼如林2回答
-
收到一只叮咚
试试这个blade<div class="container-form"><form action="{{ route('contacts.insertDate')}}" method="POST"> @csrf <input type="text" name="name" id="name" class="form-control-sm inputs" placeholder="Persona"> <input type="text" name="phone" id="phone" class="form-control-sm inputs" placeholder="Celular"> <button id="save" class="btn btn-primary btn-sm">Guardar</button> <input id="url" value={{ route('contacts.insertDate') }} class="btn btn-primary btn-sm"> </form></div>和ajaxlet name = document.querySelector('#name').value;let phone = document.querySelector('#phone').value;let save = document.querySelector('#save');let getUrl = document.querySelector('#url').value;const saveDate = ( url, var1, var2) =>{ let xhttp = new XMLHttpRequest; let token = '{{ csrf_token() }}'; let data = { _token: token, name: var1, phone: var2 } xhttp.open('POST', url, true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send(data);}save.addEventListener('click', saveDate(getUrl, name, phone)); -
米脂
Muhammad Amirozzaman Niaz 谢谢，我得到了答案，需要把 setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]'))阿贾克斯let name = document.querySelector('#name').value;let phone = document.querySelector('#phone').value;let save = document.querySelector('#save');let getUrl = document.forms.createContact;let urls = getUrl.getAttribute('action')const saveDate = ( url, var1, var2) =>{ let xhttp = new XMLHttpRequest; let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');; let data = { _token: token, name: var1, phone: var2 } xhttp.open('POST', url, true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.setRequestHeader('X-CSRF-TOKEN', token); xhttp.send(data);}save.addEventListener('click', saveDate(urls, name, phone));查看保存刀片@extends('layouts.nav')@section('content') <style> .container-form{ display: flex; justify-content: center; margin-top: 25px; } .table-insert{ margin-top:25px; } </style> <div class="container"> <h2 class="text-center">Welcome to Contact App</h2> <h4 class="text-center">{{-- auth()->user()->name --}}</h4> </div> <div class="container-form"> <form action="{{ route('contacts.insertDate')}}" method="POST" name="createContact"> @csrf <input type="text" name="name" id="name" class="form-control-sm inputs" placeholder="Persona"> <input type="text" name="phone" id="phone" class="form-control-sm inputs" placeholder="Celular"> <button id="save" class="btn btn-primary btn-sm">Guardar</button> </form> </div> <div class="container table-insert"> </div>@endsection@section('script')<script src="{{ asset('js/ajax.js') }}"></script>@endsection控制器联系人<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Contact;class Contacts extends Controller{ public function __construct(){ //$this->middleware('auth'); } /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { // $ejemplo = 'Prueba'; $hola = 'pepito es pepa'; return view('save', compact('ejemplo', 'hola')); } public function insertDate(Request $request) { if($request->ajax()){ $contact = new Contact; $contact->name = $request->name; $contact->phone = $request->phone; $contact->save(); return 'success'; } } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { // }}
随时随地看视频慕课网APP
PHP