gpt4 book ai didi

php - 多表一键提交,变量存入MySQL

转载 作者:可可西里 更新时间:2023-10-31 23:22:21 24 4
gpt4 key购买 nike

我目前正在学习不刷新页面的表单和 Ajax 发布。我有树形表单和一个提交按钮。我已经为每个输入字段分配了 php 变量,这些变量将采用输入内容的值。每个输入框都会回显该值。是否可以同时提交所有三个表格?如果是,我如何在单击按钮后将这些值提交到 MySQL 数据库?

Ajax :

function() {
$.ajax({
type: "POST",
url: "posting.php",
data: {
"name": $("#name").val(),
"age": $("#age").val(),
"phone": $("#phone").val(),
"email": $("#email").val(),
"job": $("#job").val(),
"hobby": $("#hobby").val(),
},
success: function(data) {
$("#inputResult").html(data);
}
});
}

PHP

if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
if (isset($_POST['name'])) {
$name = $_POST['name'];
echo '<div id="name_input"><h2 class="lastTab">Name:</h2>' . $name . '</div>';
}

if (isset($_POST['age'])) {
$age = $_POST['age'];
echo '<div id="age_input"><h2 class="lastTab">Age:</h2>' . $age . '</div>';
}

if (isset($_POST['phone'])) {
$phone = $_POST['phone'];
echo '<div id="phone_input"><h2 class="lastTab">Phone:</h2>' . $phone . '</div>';
}

if (isset($_POST['email'])) {
$email = $_POST['email'];
echo '<div id="email_input"><h2 class="lastTab">Email:</h2>' . $email . '</div>';
}

if (isset($_POST['job'])) {
$job = $_POST['job'];
echo '<div id="job_input"><h2 class="lastTab">Job:</h2>' . $job . '</div>';
}

if (isset($_POST['hobby'])) {
$hobby = $_POST['hobby'];
echo '<div id="hobby_input"><h2 class="lastTab">Hobby:</h2>' . $hobby . '</div>';
}
}

HTML

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm">
Name
<input type="text" id="name" class="detail" name="name" value="" />
Age
<input type="text" id="age" class="detail" name="age" value="" />
</form>
</div>.


<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm">
Phone Number
<input type="text" id="phone" class="detail" name="phone" value="" />
Email
<input type="text" id="email" class="detail" name="email" value="" />
</form>
</div>

<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm">
Job
<input type="text" id="job" class="detail" name="job" value="" />
Hobby
<input type="text" id="hobby" class="detail" name="hobby" value="" />
</form>
</div>

最佳答案

您可以使用 javascript 捕获表单的 submit,也可以触发您创建的函数。第二种情况不必是 3 种形式或什至是形式元素也能起作用

HTML:

<div id="tab-1" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm">
Name
<input type="text" id="name" class="detail" name="name" value="" />
Age
<input type="text" id="age" class="detail" name="age" value="" />
</form>
</div>.


<div id="tab-2" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm">
Phone Number
<input type="text" id="phone" class="detail" name="phone" value="" />
Email
<input type="text" id="email" class="detail" name="email" value="" />
</form>
</div>

<div id="tab-3" class="ui-tabs-panel ui-tabs-hide">
<form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm">
Job
<input type="text" id="job" class="detail" name="job" value="" />
Hobby
<input type="text" id="hobby" class="detail" name="hobby" value="" />
<input type="button" value="SAVE" onclick="saveThem()" />
</form>
</div>

Ajax :

    function saveThem() {

var name = $.trim($("#name").val());
var age = $.trim($("#age").val());
var phone = $.trim($("#phone").val());
var email = $.trim($("#email").val());
var job = $.trim($("#job").val());
var hobby = $.trim($("#hobby").val());

var dataString = 'name='+name+'&age='+age+'&phone='+phone+'&email='+email+'&job='+job+'&hobby='+hobby;

$.ajax({
type: "POST",
url: 'http://www.yourdomain.com/something.php',
data: dataString,
dataType: "json",
success: function(data) {
if(data.response){ alert(data.message); }
$("#inputResult").html(data);
}
});
}

something.php

//Get posted variables
$name = (isset($_POST['name'])) ? strip_tags($_POST['name']) : NULL;
$age = (isset($_POST['age'])) ? strip_tags($_POST['age']) : NULL;
$phone = (isset($_POST['phone'])) ? strip_tags($_POST['phone']) : NULL;
$email = (isset($_POST['email'])) ? strip_tags($_POST['email']) : NULL;
$job = (isset($_POST['job'])) ? strip_tags($_POST['job']) : NULL;
$hobby = (isset($_POST['hobby'])) ? strip_tags($_POST['hobby']) : NULL;

//execute your query
$sql = "INSERT INTO ...";

//Return results back to ajax
$result = array(
'response' => 1,
'message' => 'We have a success!'
);
echo json_encode($result);

所以总而言之,与使用 php 几乎相同,但在中间有一些 javascript。
Form:为要发送到服务器的每个元素创建一个 id(php)
Js:根据元素id抓取值并发送给php
Php:获取值、清理它们、查询或任何其他并将结果发送回 js

编辑:使用 jQuery serialize()

$('form').submit(function() {
$dataString = $(this).serialize(); //This will produce the same result, based on input names

});

关于php - 多表一键提交,变量存入MySQL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14665213/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com