javascript - 为什么将表单链接到连接到 php 的 javascript 文件时，浏览器中会显示 Javascript 代码？

Question

我正在使用一个表单来收集值，以便将新玩家添加到我创建的数据库中。为此，我需要有一个 HTML 页面(这是保存表单的地方)一个 Javascript 文件，其中包含用于发布的 ajax 调用和一个用于连接到数据库的 php 文件。

但是，当我填写表格并单击提交时，它不会向我显示新添加的播放器，而只会向我显示我在浏览器上的 Javscript 代码。我不太确定错误在哪里，因为我在表单和数据库中都保留了较低的空间。

这是我链接到 JS 文件的表单代码:

 <h2>Add a Player:</h2>
         <form action="api2.js" method="post">
         <input type="text" name="firstname" placeholder="First Name" /><br>
         <input type="text" name="lastname" placeholder="Last Name" /><br>
         <input type="text" name="team" placeholder="Team" /><br>
         <input type="submit" value="submit" />
         </form>

这是我的 JS 文件:

$(document).ready(function(){   

    $.ajax({    
                 type:  'POST', 
                 url:   'api.php/players',  
                 data:JSON.stringify(nhl),
                 success:   showResponse,   
                 error: showError
                    }); 

    function    showResponse(responseData)  {   
             console.log(responseData); 
}   
function    showError() {   
             alert("Sorry,  there   was a   problem to  add new staff!" );  
}

});


    function    Player(firstname,   lastname,   team){  
this.firstname = firstname; 
this.lastname = lastname;   
this.team = team
}   
                        $('form').on('#submit', function(event){

                            event.preventDefault();

                            var player = new Player(firstname, lastname, team);
                            var firstname = $('.firstname').val();
                            var lastname = $('.lastname').val();
                            var team = $('.team').val();




}); 

最后是我的 php 文件:

//Add Player

function    addPlayer() {   
                $request    =   Slim::getInstance()->request(); 
                $nhl    =   json_decode($request->getBody());   
                $sql    =   "insert into    nhl (lastname,  firstname,  team)   values  (:lastname, :firstname, :team)";    
                try {
                                $db =   getConnection();    
                                $stmt   =   $db->prepare($sql); 
                                $stmt->bindParam("lastname",    $nhl->lastname);    
                                $stmt->bindParam("firstname",   $nhl->firstname);   
                                $stmt->bindParam("team",    $nhl->team);    
                                $stmt->execute();   
                                $nhl->Player_Id =   $db->lastInsertId();    
                                $db =   null;   
                                responseJson(json_encode($nhl),201);    
                }   catch(PDOException  $e) {   
                                responseJson(   '{"error":{"text":'.    $e->getMessage()    .'}}',500); 
}   
}   

我曾尝试将表单操作更改为 php 文件，但它会显示 404 错误，或者如果我将其直接链接到 api.php/players，它会显示此错误:

{"error":{"text":SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'lastname' cannot be null}}`

如有任何帮助或指导，我们将不胜感激。

Answer 1

因为你这样做:

<form action="api2.js" method="post">

HTTP POST 方法将表单数据发送到指定的 URL，并重定向到该 URL。如果该 URL 是一个网页，它将按原样呈现。 JavaScript(您的 api2.js 文件)不是。

您可能想要做的是将您的表单发布到您的 PHP 文件。