Question

我想获取表单变量并将它们推入内存中的数组，而不是通过重新加载来破坏页面。这实际上是我没有专业知识的。这可以做到吗？我需要使用基于表单的php将内容添加到json文件中。

JSON DATA：

var members = [ 
{ "Class": "B", "Rating": "1776", "ID": "12537964", "Name": "Ahmed, Jamshed", "Expires": "2018.10.18" }, 
{ "Class": "C", "Rating": "1500", "ID": "12210580", "Name": "Attaya, James", "Expires": "2019.01.12" }, 
{ "Class": "F", "Rating": "0000", "ID": "16281977", "Name": "Auld, Thomas", "Expires": "" }, 
{ "Class": "B", "Rating": "1759", "ID": "10117780", "Name": "Badamo, Anthony", "Expires": "2018.09.12" }
]

JS：

<form action="" id = "newMember" class="pure-form" method = "GET" > 
<fieldset> 

<label for="mem-name">Last, First name:</label> <input type="text" id = "mem-name" name="mem-name" maxlength = "25" size = "20" /> 
<label for="mem-expires">Membership:</label> <input type="text" id = "mem-expires" name="mem-expires" maxlength = "10" size = "8" /> <br /> 
<label for="mem-rating">Rating:</label> <input type="text" id = "mem-rating" name="mem-rating" maxlength = "4" size = "3" /> 
<label for="mem-ID">ID:</label> <input type="text" id = "mem-ID" name="mem-ID" maxlength = "8" size = "7" /> 
<label for="mem-class">Class:</label> <input type="text" id = "mem-class" name="mem-class" maxlength = "2" size ="2" /> 

<button type="button" id="addPlayer" style="margin-left:2rem;" class="pure-button pure-button-primary" onClick="validateForm()">add new player</button> 
<button type="reset" style="margin-left:2rem;" class="pure-button pure-button-secondary">reset form</button> 

</fieldset> 

</form>

<script> 

function validateForm() { 

var memName = document.getElementById('mem-name').value; 
var memExpires = document.getElementById('mem-expires').value; 
var memRating = document.getElementById('mem-rating').value; 
var  memID = document.getElementById('mem-ID').value; 
var memClass = document.getElementById('mem-class').value; 

if (memName == "") { 
alert("Name must be filled out"); 
return false; 
}else { 

$.ajax({ 

type: 'GET', 
url : 'welcome.php', 
data : { 

'mem-name' :memName, 
'mem-expires' :memExpires, 
'mem-rating' :memRating, 
'mem-ID' :memID, 
'mem-class' :memClass 

}, 
success : function(data) { 

console.log('My data should be here: ' + data); 

members = JSON.parse(data); 
console.log(members);

} 

}); 

} 

} 

</script>

MEMBERS.PHP：

<?php 

// Clean up data 
function test_input($data) { 
$data = trim($data); 
$data = stripslashes($data); 
$data = htmlspecialchars($data); 
return $data; 
} 


// define variables and set to empty values 
$mem_name = $mem_expires = $mem_rating = $mem_ID = $mem_class = ""; 

if ($_SERVER["REQUEST_METHOD"] == "GET") { 
$mem_name = test_input($_GET["mem-name"]); 
$mem_expires = test_input($_GET["mem-expires"]); 
$mem_rating = test_input($_GET["mem-rating"]); 
$mem_ID = test_input($_GET["mem-ID"]); 
$mem_class = test_input($_GET["mem-class"]); 

$array = array( 

"Class" => $mem_class, 
"Rating" => $mem_rating, 
"ID" => $mem_ID, 
"Name" => $mem_name, 
"Expires" => $mem_expires 


); 

$json = file_get_contents('/home/verlager/public_html/cccr_mems.json'); 

$json = preg_replace('/\s{0,}var\s{0,}members\s{0,}=\s{0,}/', '', $json); 
$json = preg_replace('/];\s{0,}/', ']', $json); 

$json_data = json_decode($json,true); 

array_push($json_data, $array); 

$encodedJson = json_encode($json_data); 

$myNewJson = 'var members =' . $encodedJson . '];';

file_put_contents('/home/verlager/public_html/cccr_mems.json', $myNewJson, LOCK_EX); 

echo json_encode($encodedJson); 

} 
?>

这几乎可行，但并不完全。什么是令人满意的解决方案？

Answer 1

您可以使用array_push（）将数组的另一个元素添加到现有数组中。如果你的js脚本使用对php页面的AJAX调用，那么php页面会将json字符串发送回调用的js页面。然后你可以用它做任何你想做的事。

<?php
    // define variables and set to empty values
    $mem_name = $mem_expires = $mem_rating = $mem_ID = $mem_class = "";
    if ($_SERVER["REQUEST_METHOD"] == "GET") {
        $mem_name = test_input($_GET["mem-name"]);
        $mem_expires = test_input($_GET["mem-expires"]);
        $mem_rating = test_input($_GET["mem-rating"]);
        $mem_ID = test_input($_GET["mem-ID"]);
        $mem_class = test_input($_GET["mem-class"]);
    }    
    // Clean up data
    function test_input($data) {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
    }
    // Read JSON file
    $json = file_get_contents('cccr_mems.json');
    //Decode JSON
    $json_data = json_decode($json,true);
    //Print data print_r($json_data); <=== WORKS
    //Here I want to push the GET vars to json members w/o writing to disk!

    //Create an element of the array.
    $array = array(

      "Class"   => $mem_class,
      "Rating"  => $mem_rating,
      "ID"      => $mem_ID,
      "Name"    => $mem_name,
      "Expires" => $mem_expires


    );

    array_push($json_data, $array); //Add the element to the $json_data array.

    //print_r($json_data);  //Shows the results as a php array. 

    echo json_encode($json_data); //Shows results as json string.
    //This is what will get sent back to the calling js page.


?>

Answer 2

1.由于$ json_data是一个关联数组，该函数 array_push（$ json_data，array（＆＃39; Class＆＃39; =＆gt; $ mem_class]））; 可用于将变量添加到数组中。

使用json_encode将数组转换回json。

如果您不想重新加载页面，可以使用客户端的Ajax调用将表单数据发送到PHP脚本，并返回在步骤2中创建的json对象。 / p>

    $.ajax({
    url: '/handle_form_data.php',
    type: 'POST',
    dataType: "json",
    data: {
        name: $('#name').val(),
        expires: $('#expires').val(),
        id: $('#ID'').val()   //all form variables which need to be sent 
    },
success:function(response){
//Do stuff with json object returned from step 2
}
});

或者如果我理解你的问题，如果您不想重新加载页面而不想在后端保存表单数据，则可以在前端JavaScript中编写test_input() function，在表单字段中的值上运行{结果可以添加到成员的数组中。此操作不需要服务器调用。

形成GET变量并发布到php数组

2 个答案: