Question

并提前感谢您阅读本文。我是php和jquery的新手。我已经设法在php中做了几个有效的表单，现在感觉有很大的需求（因为我的网页正在塑造）使它们与jquery一起工作。我正在尝试，但有些事情是不对的。这是形式：

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method ="post" id="form_Add">
<br>
<div class="Add_field" id="title_div">Title:<input typee="text" class="Add_text" maxlength="100" name="title" id="title"></div>
<br>
<div class="Add_field">Discription:<input typee="text" class="Add_text" maxlength="1000" name="discription" id="discription"></div>
<br>
<div class="Add_field" id="content_div">Content:<textarea class="Add_text" maxlength="65535" name="content" id="content" rows="5" cols="15"></textarea></div>
<br>
<div class="Add_field"><label for="shortstory"><input typee="radio" name="prose" class="" id="shortstory" value="1">Short story</label></div>
<div class="Add_field" id="prose_div"><label for="chapter"><input typee="radio" name="prose" class="" id="chapter" value="2">Chapter</label></div>
<br>
<div class="Add_field" id="typey">type:
<select name="type1">
    <option value="1" selected="selected">Fantasy</option>
    <option value="2">Action</option>
    <option value="3">Romance</option>
</select>with elements of 
<select name="type2" id="type2">
    <option value="" selected="selected"></option>
    <option value="1">fantasy</option>
    <option value="2">action</option>
    <option value="3">romance</option>
</select>and
<select name="type3" id="type3">
    <option value="" selected="selected"></option>
    <option value="1">fantasy</option>
    <option value="2">action</option>
    <option value="3">romance</option>
</select>
</div>
<div class="Add_field"><input typee="submit" name="Add_story" class="Add_button" id="submit_story" value="Add story"></div>
</form>

<div id="response">Something</div>

那是剧本：

<script>



$('#form_Add').on('submit', function (e) {
            e.preventDefault();
            checkAdd(); 
            });

var selectType = function(){
    var type2 = $('#type2').val();  
    if(type2 === ""){
        $('#type3').attr('disabled', 'disabled');
        $('#type3').val("");
    }
    else{
        $('#type3').removeAttr('disabled');
    }
}

$(selectType);
$("#type2").change(selectType);


function checkAdd(){
    var title = $('#title').val();
    var content = $('#content').val();
    if(title === ""){
        $('#titleErr').remove();
        $('#title_div').append("<p id='titleErr'>Please add the title.</p>");
    }
    else{
        $('#titleErr').remove();    
    }
    if(content.replace(/ /g,'').length <= 18){
        $('#contentErr').remove();
        $('#content_div').append("<p id='contentErr'>Content needs to be at least 19 characters long.</p>");
    }
    else{
        $('#contentErr').remove();  
    }
    if($("#shortstory").not(":checked") && $("#chapter").not(":checked")){
        $('#proseErr').remove();
        $('#prose_div').append("<p id='proseErr'>Check one of the above.</p>");
    }
    if($("#shortstory").is(":checked") || $("#chapter").is(":checked")){
        $('#proseErr').remove();    
    }
    if($("#titleErr").length == 0 && $("#contentErr").length == 0 && $("#proseErr").length == 0){

         $.post('"<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"', {  // when using this bit of script I get 403 Forbidden in Firebug console
            title: $('#title').val(),
            discription: $('#discription').val(),
            content: $('#content').val(),
            prose: $('input[name=prose]:checked').val(),
            type1: $('#type1').val(),
            type2: $('#type2').val(),
            type3: $('#type3').val()
        }, function(d){

            alert(d);
            console.log(d);
            $('#response').html(d);
            });


    }
    /*

    var postData = $("#form_Add").serialize();       // when using this bit of script instead of one on top, I get alert fail and ReferenceError: data is not defined in Firebug console
    var formURL = $("#form_Add").attr("action");
    $.ajax(
    {
        url : formURL,
        typee: "POST",
        data : postData,
        datatypee: 'json',
        success:function(data, textStatus, jqXHR)
        {
            alert("success");//data: return data from server 
            console.log(data.error);
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
            alert("fail");
            console.log(data.error);

        }
    });
    }
*/
};


</script>

这是php代码：

<?php
session_start();
 if(isset ($_SESSION['arr'])){
$arr = $_SESSION['arr']; 
$uid = $arr['id'];
}
$title = $discription = $content = $prose ="";

if (isset($_POST["Add_story"])) {

        $title = stripslashes($_POST["title"]);
        $title = mysqli_real_escape_string($connection , $title);


        $discription = stripslashes($_POST["discription"]);
        $discription = mysqli_real_escape_string($connection , $discription);   


        $content = stripslashes($_POST["content"]);
        $content = mysqli_real_escape_string($connection , $content);


        $prose = stripslashes($_POST["prose"]);
        $prose = mysqli_real_escape_string($connection , $prose);


        $type1 = $_POST["type1"];
        $type2 = $_POST["type2"];
        $type3 = $_POST["type3"];


        $pQuery = "INSERT INTO  prose (u_id, data, title_s, discription_s, content_s, prose_s, type1_s, type2_s, type3_s, shows_s)
        VALUES ('{$uid}', CURDATE(), '{$title}', '{$discription}', '{$content}', {$prose}, '{$type1}', '{$type2}', '{$type3}', 0)";
        $resultP = mysqli_query($connection, $pQuery);

            if ($resultP) {


                $title = $discription = $content = $prose ="";

            } 
            else {

                die("Query failed." . mysqli_error($connection));

            }

}
?>

Php代码位于文档的顶部。源位于底部，表单位于中间（我使用jquery-1.11.1.min.js - 源在主页面中添加，因为这个包含在其中）。我也尝试将php放在单独的文件中并通过表单操作而不是<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>指向它，但没有任何乐趣。我猜测我的问题在于发布数据。它可能必须在数组或对象中（并且我做错了），当它到达处理时，存在某种不兼容性。可能使用选择和单选按钮会使过程复杂化。

您可以分享的任何提示我将非常感谢。谢谢你的时间。

Answer 1

您的提交按钮中存在严重错误

<input typee="submit" name="Add_story"
           ^ extra "e"

应该读作

<input type="submit" name="Add_story"

您的代码执行依赖于您的条件声明：

if (isset($_POST["Add_story"])){...}

另外，您为所有其他输入做出了相同的拼写错误typee="xxx"

将它们全部更改为type

在Notepad ++等代码编辑器中使用简单的CTRL-H（typee / type），即使在记事本中，也能解决这个问题。

我注意到你已经同意了<select name="type2" id="type2">的身份和<select name="type3" id="type3">但不是<select name="type1">，所以这也可能是影响代码执行的另一个因素，看到你有：

type1: $('#type1').val(),
type2: $('#type2').val(),
type3: $('#type3').val()

修改

您还发表了一条评论性消息，我现在只看到这些消息，并且应该在您的问题中明确说明：

// when using this bit of script I get 403 Forbidden in Firebug console

在
的右边
$.post('"<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"', {

所以我没有看到。

尝试将其更改为任一项，仅使用单引号：

$.post('<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>', {

或

$.post('your_file.php', $(this).serialize(), function(data){

此页面可能有所帮助：

的 https://www.codeofaninja.com/2013/09/jquery-ajax-post-example.html

它包含一个你可以自己做的例子。

包含

$.ajax({ type: 'POST', url: 'post_receiver.php', data: $(this).serialize() })

可能需要添加到您的脚本中。

您已注释掉url : formURL, - 尝试使用url: 'your_PHP_file.php',取代它，即您正在使用的PHP / SQL文件。

如果这些都没有帮助，请告诉我，我会删除这个答案。

ReferenceError：未定义数据或403 Forbidden

1 个答案: