Question

来自总jquery / ajax新手的基本问题。

我有一个带有两个输入字段的简单表单，我希望通过jquery和ajax将数据传递到服务器端的php文件。处理完毕后，它应该给我一个很好的回复，例如＆＃34;请求已处理＆＃34;或其他一些文字。

我搜索了网络和这个论坛，我发现并非所有的帖子/网页/教程都以同样的方式描述。所以现在，我在丰富的信息中有点迷失。

第一个问题：在所有教程中，表单都在.html文件中（如index.html）。就我而言，表单位于.php文件中。这对表格的处理方式有影响吗？表单是用html语法编写的，所以无论是.html还是.php文件都没关系，对吗？

第二个问题：

在某些教程中，表单操作将链接到发送数据的php文件。方法通常是＆＃34; POST＆＃34;。然后，在jquery文件中，$ .ajax url也指向同一个php文件。

这是正确的方法吗？

如果我这样设置，点击提交按钮后，浏览器总是被定向到form-action中的php文件，我写的jquery文件没有被执行。我不知道为什么会这样。

希望有人能指出我正确的方向。

Answer 1

到目前为止，我将回答我所知道的事情，

对于文件扩展名，它应该适用于.php，.html或.json。 ajax只会在你声明的dataType时获得返回（html   或者json）。


对于您可以使用POST或GET的类型，它取决于需要。但是对于你的问题（ajax无法执行），你必须始终   通过打开检查元素（右边）检查ajax的发送数据   点击浏览器，建议使用chrome）。然后单击   '网络'标签。如果有错误，你可以看到那里。（总是   例如，通过die（$ query）来描述数据代码的代码。   古德勒克！

Answer 2

如果你有：

<?php
<form action="distant.php" id="myForm">
    <input type="text" name="form-element" />
    <input type="submit" value="Submit form" />
</form>
<div id="message"></div>
?>

你可以在jQuery中执行此操作：

$('form').on('submit',function(e){
    e.preventDefault(); // do not try to access distant.php by reloading the page
    $.ajax({
        type     : "POST",
        url      : $(this).attr('action'), // access distant.php by ajax
        data     : $(this).serialize(), // get values from the form. In this case, only one element (with name="form-element")
        success  : function(data) {
            // response from distant.php - could be "request was processed" if you want
            $("#message").html(data); // display the response in the html
        }
    });
});

但是，我没有看到混合html和php的观点。

Answer 3

文件类型是php，html，aspx等并不重要。发送到浏览器的输出将被客户端视为相同。

您的问题提到了将数据发布到后端的两种不同方式，您可以将两者混合并匹配。

一个简单的：

<form action="/somepage.php" method="post"></form>

是将数据从客户端发布到服务器的最标准方法。这可能是你学习的好起点。 AJAX做了同样的事情但它没有改变加载页面的URL，从而保持当前页面加载并异步地将数据发送到服务器。通常在后一种情况下，您仍然希望操纵DOM或向用户显示一些反馈，以表明他们的数据已经提交。

正如我之前所说，我认为你应该从标准表格帖子开始到你的后端和行动页面，显示“结果”。这是学习客户端和服务器端之间交互的更好的起点。

使用ajax，php和jquery形式 - 动作或不动作

3 个答案: