php ajax表单动态提交
[英]php ajax form submit dynamically
问题描述
i have no knowledge about websocket for chat i want to use php ajax for form submit for chat i want to sumbit form dynamically without reload but it gets reload ( which i dont want ). 
我不知道有关websocket聊天的知识，我想使用php ajax进行表单提交以进行聊天，我想动态地汇总表格而不重新加载，但它会重新加载（我不想要）。 i have created a chat in which php sends information to xml as and displays all xml information, and when user submits the form below 我创建了一个聊天窗口，其中php将信息发送到xml并显示所有xml信息，并且当用户提交以下表单时
<form action="action.php" method="post" id="formpost">
<input type="text" id="input" value="php echo">
<input type="submit" value="send">
</form>
it reloads to display this php 它重新加载以显示此php
<div class="msg"><?php print $message->getName() ." : " . $chat->message . ""; ?></div>
Additional info : when i remove the chat $chat->message . 附加信息：当我删除聊天$chat->message . no msgs display because the php loop only name shows in <div class="msg"> above 没有显示消息，因为php循环唯一名称显示在上面的<div class="msg">
i have tried this to submit form dynamically by javascript but when i click the button a alert comes with my own html <html><body>..</html> , and when i reload the page manually msg shows 我已经尝试过使用javascript动态提交表单，但是当我单击按钮时，警报会附带我自己的html <html><body>..</html> ，并且当我手动重新加载页面时，msg显示
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#formpost").on('submit', function(event){
event.preventDefault();
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: "club.php",
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
</script>
3 个解决方案
解决方案1
1 2018-08-02 07:44:20
Maybe I have understood your question :D. 也许我已经理解了您的问题：D。
Html
HTML <form action="action.php" method="post" id="formpost"> <input type="text" id="input" value="php echo"> <input type="submit" value="send"> </form>The area will display the message
该区域将显示消息 <div class="msg" id="msg"><?php print $message->getName() ." : " . $chat->message . ""; ?></div>Javascript
Java脚本 \n\n
\n\n$("#formpost").on('submit', function(event) { event.preventDefault(); var form = $(this); var url = form.attr('action'); $.ajax({ type: "POST", url: "club.php", data: form.serialize() // serializes the form's elements. }).done(function(data) { var msg = $(data).find('#msg').html(); alert(msg); }); });
I think the response of Ajax will return an HTML page (you can check it with way access to "/club.php" what you see on screen it will be responded 我认为Ajax的响应将返回HTML页面（您可以通过访问“ /club.php”的方式对其进行检查，在屏幕上看到的内容将得到响应）
EDIT: 编辑：
UPDATE MY ANSWER 更新我的答案
At JS 在JS
$(function() { $("#formpost").submit(function(event) { event.preventDefault(); var form = $(this); var url = form.attr('action'); $.ajax({ type: "POST", url: url, data: form.serialize() // serializes the form's elements. }).done(function(data) { var msg = $(data).find('#msg').text(); alert(msg); }); }); });
解决方案2
1 2018-08-09 15:53:19
$(function() {
$("#formpost").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "club.php",
data: $(this).serialize(),
}).done(function(data) {
var msg = $(data).find('#msg').text();
alert(msg);
});
});
});
解决方案3
0 2018-08-02 03:29:51
There are a number of possible issues here - 这里有很多可能的问题-
First, ensure that your DOM (HTML) has loaded before running your jQuery script. 首先，在运行jQuery脚本之前，请确保已加载DOM（HTML）。 One way to achieve this is to place your current jQuery logic inside of a $(function() { .. }) as shown below. 实现此目的的一种方法是将当前的jQuery逻辑放在$(function() { .. }) ，如下所示。 This guarantees the DOM will be loaded and available to access before you run your form/ajax setup logic. 这样可以确保在运行表单/ ajax设置逻辑之前，将加载DOM并可以访问DOM。
Also, consider more declarative approach by using the submit() method that jQuery provides on <form> elements. 另外，通过使用jQuery在<form>元素上提供的submit()方法，考虑使用更具声明性的方法。 Also, jQuery allows you to return false from submit handler functions, to prevent a page reload: 另外，jQuery允许您从提交处理程序函数返回false ，以防止页面重新加载：
// You may need to wrap your form logic in a jquery context, in case the
// script is run before your page DOM has loaded
$(function() {
// also consider using the more declarative submit() method that is available
// on forms
$("#formpost").submit(function() {
$.ajax({
type: "POST",
url: "club.php",
data: $(this).serialize(),
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // Prevent the form submit from reloading the page
});
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.