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

我正在使用一个表单来收集值，以便向我创建的数据库中添加一个新的播放器。要做到这一点，我需要有一个HTML页面（这是保存表单的地方）、一个带有ajax调用的Javascript文件和一个连接到数据库的php文件

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

以下是链接到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>

最后是我的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}}`

---

任何帮助或指导都将不胜感激。

因为您正在这样做：

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

HTTP

POST

方法将表单数据发送到指定的URL，并重定向到该URL。如果该URL是一个网页，它将被呈现为这样。JavaScript（您的

api2.js

文件）不可用

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

1）如果将表单操作设置为api2.js，您将如何接收js文件中的数据，？相反，你可以这样做。 试试这个

 <h2>Add a Player:</h2>
         <form action="" method="post">
         <input type="text" id="firstname" name="firstname" placeholder="First Name" /><br>
         <input type="text" id="lastname" name="lastname" placeholder="Last Name" /><br>
         <input type="text" id="team" name="team" placeholder="Team" /><br>
         <input type="button" value="submit" onClick="showData();" />
         </form>

         <div style="position:absolute;padding:30px 20px 30px 20px;text-align:center;width:80%;left:0px;right:0px;"> </div>



         <script type="text/javascript">
         function showData()
         {
         var first = document.getElementById('firstname').value;
         var last = document.getElementById('lastname').value;
         var team = document.getElementById('team').value;

         // COMPOSE YOUR "nhl" STRING THE ABOVE VALUES 

         $.ajax({    
                 type:  'POST', 
                 url:   'api.php/players', THAT'S WHY IT'S SHOWING 404 ERROR.
                 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();


         }

         </script>

添加一个播放器：






函数showData（）
{
var first=document.getElementById（'firstname'）。值；
var last=document.getElementById（'lastname'）。值；
var team=document.getElementById（'team'）.value；
//将上述值组成“nhl”字符串
$.ajax（{
键入：“POST”，
url:'api.php/players'，这就是它显示404错误的原因。
数据：JSON.stringify（nhl），
成功：showResponse，
错误：淋浴错误
}); 
函数showResponse（responseData）{
控制台日志（responseData）；
}   
函数showError（）{
警报（“抱歉，添加新员工时出现问题！”）；
}
});
功能玩家（名字、姓氏、团队）{
this.firstname=firstname；
this.lastname=lastname；
这个队
}   
$（'form'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
var player=新玩家（名字、姓氏、团队）；
var firstname=$（'.firstname'）.val（）；
var lastname=$（'.lastname'）.val（）；
var team=$（'.team'）.val（）；
}

我认为您不需要“action=”api2.js“。是否有这样的脚本链接

<script type="text/javascript" src="path/to/js/api2.js"></script>?

及

到

在这个阶段，我将打印变量，并在控制台中检查它们是否被提取，然后再次检查它们是否被传递到php文件（var_dump（$nhl）），并确保表单内容被传递到php文件

---

另一件需要检查的事情是php文件的URL，并确保它是可访问的。我不认为它是正确的。

错误消息非常清楚。您是否检查了

$nhl

中的值？是的，所有值都拼写相同，并且都是小写的，我被告知将DB列更改为null以进行故障排除，一旦我这样做了它发布到我的数据库，但不是我在表单中输入的值，而是将值发布为NULL，而不是headah好的，问题是我需要让它通过js链接到php，是否存在这样的问题？当我将它链接到api.php/players时，它收集表单的值，但将它们作为NULL值发布到我的数据库。不幸的是，它什么也没做。它只是停留在主页上，什么也没发生1）右键单击=>Inspect元素=>console，如果您看到任何javascript错误，请修复它们，2）警告javascript响应。我已将文件发送给您NandanOk，我会看一看的谢谢你我真的很欣赏它的意思是这行数据中的nhl变量：JSON.stringify（nhl），没有定义你在哪里把你的js变量（firstname，lastname等）保存到nhl？您需要将这些变量保存到JSON对象nhl当您将它们提交到js脚本中形成表单时，我将更新我的答案nhl是需要将值保存到的表格是，但在这行数据中：JSON.stringify（nhl）您正在将js值nhl转换为JSON字符串，但从未设置nhl。因此，您建议我如何纠正这一点？

<script type="text/javascript" src="path/to/js/api2.js"></script>?

$('input').on('click', 'input#submit', function(event){

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

              var nhl = {};
                  nhl['firstname'] = firstname;
                  nhl['lastname'] = lastname;
                  nhl['team'] = team;
});

<input type="submit" value="submit" /> to  <input type="submit" value="submit" id="submit" />