Javascript 如何通过jQuery/ajax提交我的表单？

我正试图通过jquery提交表单，这样整个页面就不会重新加载。我正在按照指南上的说明去做，但到目前为止还不起作用。以下是我想要完成这项任务的东西

将表单提交到ColdFusion代理页面，然后通过CFHTTP将数据作为json发送

在提交表单的过程中，显示进度或状态

以某种方式隐藏或删除页面上的表单

在表单原来所在的页面上显示成功或感谢消息

到目前为止，我的表单甚至没有从输入中找到值。错误表示“TypeError:$form.find（…）.value不是函数”。以下是迄今为止我的JavaScript代码：

$(function(){
        $("##frmComment##").submit(function(event){
            event.preventDefault();             
            $("##submitResponse").append('<img src="http://st2.india.com/wp-content/uploads/2014/07/ajax-loader.gif" class="progressGif">');


            // Cache $form, we'll use that selector more than once
            var $form=$(this);

            var data = $form.serialize(); //get all the data of form

            //post it
            $.post(
            "/customcf/knowledgeOwl/proxyPost-KB.cfm",
            data,
            //console.log(response),                
            function(response){
                // Success callback.  Remove your progress gif, eg:
                 //$('body').removeClass('in-progress');
                 console.log(response);
                // Remove the spining gif from the div
                $("##submitResponse img:last-child").remove();
                //Remove the feedback form
                $("##frmComment").remove();
                $form.fadeOut('slow', function(){
                    //Add response text to the div
                    $("##submitResponse").append("<h6>Thank you for your feedback.</h6>");
                    $("##submitResponse").html(response).fadeIn('slow');
                });
            });


            });
        })

$（函数（）{
$（“###frmComment###”）提交（函数（事件）{
event.preventDefault（）；
$（“##提交响应”）。追加（“”）；
//缓存$form，我们将多次使用该选择器
var$form=$（此）；
var data=$form.serialize（）；//获取表单的所有数据
//张贴
美元邮政(
“/customcf/knowledgeOwl/proxyPost KB.cfm”，
数据，
//控制台日志（响应），
功能（响应）{
//成功回调。删除您的进度gif，例如：
//$（'body'）.removeClass（'in-progress'）；
控制台日志（响应）；
//从div中删除旋转gif
$（“##submitResponse img:last child”）.remove（）；
//删除反馈表单
$（“##frmComment”）.remove（）；
$form.fadeOut（'slow'，function（）{
//将响应文本添加到div
$（“##提交响应”）.append（“感谢您的反馈”）；
$（“##submitResponse”）.html（response.fadeIn（'slow'）；
});
});
});
})

这是我在JSFIDLE中设置的。这是表格

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<form data-abide id="frmComment">
    <div class="row">
        <div class="large-12 medium-12 columns">
            <div class="row" data-equalizer>
                <div class="large-4 medium-4 columns">
                    <div class="row">
                        <div class="large-12 columns">
                            <label>
                                <input type="text" placeholder="Name" name="name" required>
                            </label>
                            <small class="error">Name is required and must be a string.</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <label>
                                <input type="text" placeholder="Email" name="mailfrom" required pattern='.*@.*\..{3}|.*@.*\..{2}'>
                            </label>
                            <small class="error">An email address is required.</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <div class="g-recaptcha" data-sitekey="6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E"></div>
                            <noscript>
                                <div style="width: auto; height: 462px;">
                                    <div style="width: auto; height: 422px; position: relative;">
                                        <div style="width: auto; height: 422px; position: absolute;">
                                            <iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfjNwITABCDPbDHdC5wx6HXRmXtqO3pgUItl-E" frameborder="0" scrolling="no" >
                                            </iframe>
                                        </div>
                                    </div>
                                    <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: ##f9f9f9; border: 1px solid ##c1c1c1; border-radius: 3px; height: 100px; width: 300px;">
                                        <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 280px; height: 80px; border: 1px solid ##c1c1c1; margin: 10px; padding: 0px; resize: none;"></textarea>
                                    </div>                                                  
                                </div>
                                <br /><br />                                             
                            </noscript>
                        </div>
                    </div>
                </div>
                <div class="large-8 medium-8 columns">
                    <div class="row">
                        <div class="large-12 columns">
                            <textarea id="message" name="message" placeholder="Leave a comment...we love feedback!" rows="5"  required></textarea>                                                  
                        </div>
                    </div>
                    <div class="row">
                        <div class="large-12 columns">
                            <button type="submit" class="tiny right button">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<div id="submitResponse"></div>

名称是必需的，并且必须是字符串。
需要一个电子邮件地址。



提交

好的，在一些帮助下，我设法让jQueryPost将数据发送到我的proxyPost-KB.cfm页面，但当它到达该页面时出错（505）。这是我在proxyPost-KB.cfm页面中的内容。我在这个CFM页面中设置的日志也没有执行

<!---
    Make the proxy HTTP request using. When we do this, try to pass along all of the CGI information that was made by the original AJAX request.
--->
<cflog text="CGI: #cgi#" type="Information" file="CGIparameters">
<cfhttp url="https://app.kb.com/api/head/comment.json" method="post" timeout="15" throwonerror="true">
    <!---<cfhttpparam type="body" name="data"value="#serializeJSON(jsonString)#" />--->
    <cfhttpparam type="url" name="_authbykey" value="56ec1f1232131c78636142d6">
    <cfhttpparam type="url" name="project_id" value="55c4ffd123131c527e294fe6">
    <!---<cfhttpparam type="url" name="article_id" value="#artID#">
    <cfhttpparam type="url" name="content" value="#form.message#"/>
    <cfhttpparam type="url" name="public_name" value="#form.name#"/>
    <cfhttpparam type="url" name="public_email" value="#form.mailfrom#"/>--->
    <cfhttpparam type="url" name="status" value="pending"/>

    <!--- Pass along any URL values. --->
    <cfloop item="strKey" collection="#URL#">
        <!---<cfhttpparam type="url" name="public_name" value="#URL[strKey]#" />
        <cfhttpparam type="url" name="public_email" value="#URL[strKey]#" />--->        
        <cflog text="URL: #URL[strKey]#" type="Information" file="CGIparameters">
    </cfloop>
</cfhttp>

<!---
    Get the content as a byte array (by converting it to binary,
    we can echo back the appropriate length as well as use it in
    the binary response stream.
--->
<cfset binResponse = ToBinary(ToBase64( objRequest.FileContent )) />

<!--- Echo back the response code. --->
<cfheader statuscode="#Val( objRequest.StatusCode )#" statustext="#ListRest( objRequest.StatusCode, ' ' )#" />

<!--- Echo back response legnth. --->
<cfheader name="content-length" value="#ArrayLen( binResponse )#" />

<!--- Echo back all response heaers. --->
<!---<cfloop item="strKey" collection="#objRequest.ResponseHeader#">
<!--- Check to see if this header is a simple value. --->
    <cfif IsSimpleValue( objRequest.ResponseHeader[ strKey ] )>

        <!--- Echo back header value. The cfheader tag generate the error "Complex object types cannot be converted to simple values"--->
        <cfheader name="#strKey#" value="#objRequest.ResponseHeader[ strKey ]#" />
        <cflog text="IsSimpleValue: #strKey#" type="Information" file="debugCFLoop">
    </cfif>
</cfloop>--->--->

<!---
    Echo back content with the appropriate mime type. By using
    the Variable attribute, we will make sure that the content
    stream is reset and ONLY the given response will be returned.
--->
<cfcontent type="#objRequest.MimeType#" variable="#binResponse#" />

--->--->

我认为您可以在

$（“#frmComment”）中使用此代码。提交（函数（事件）{

函数：

event.preventDefault();
var data = $('#frmComment').serialize(); //get all the data of form
var url = "yourUrl.php";

 $.ajax({
    type: "POST",
    url: url,
    data: data,
    dataType: "json",
    success: function(data) {
        //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handing here');
    }
});

---

PHP“yourUrl”将接收表单输入（您可以使用

var\u dump（$\u POST）；

查看结构。

下面是一个示例，以完成您所描述的操作：

$("#frmComment").submit(function(event) {
    event.preventDefault();

    // Form has been submitted - now show your progress gif, eg:
    // $('body').addClass('in-progress');
    // or maybe:
    // $('.spinner').show();
    // etc - CSS can be whatever you want

    // Cache $form, we'll use that selector more than once
    var $form=$(this);

    // Serialize all input from the form
    var data=$form.serialize();

    // Post it
    $.post(
        "your-proxy-url",
        data,
        function(response) {
            // Success callback.  Remove your progress gif, eg:
            // $('body').removeClass('in-progress');
            console.log(response); // show the proxy response on your console

            // Now hide the form
            $form.fadeOut('slow', function() {
                // And show a result once it's gone
                $(".result").html(response).fadeIn('slow');
            });
        }
    );
});

---

TypeError在这里，它不是

$form

，而是

$（form）

Ah！现在感觉有点傻……我来试试。好吧，我试过了，但它仍然会给我同样的错误。另外，本页的示例代码显示了我在上面的方式。只要阅读这篇文章，它可能会给你解决问题的指针。silution是针对php的，但表单提交在任何技术中都是一样的@Sabbin$form只是f类型错误发生在该行较远的地方。

.value（）

当然不是jquery方法。谢谢！我会尝试一下。我不确定为什么否决…最好给出理由。好的，这个实现有一个小问题。我不想离开当前页面。我只想将表单中的数据提交到代理页面。似乎这个建议会将表单发布到o代理页面，然后离开页面。我希望用户保持页面不变，但只提交表单。不，它不应该这样做-event.preventDefault（）将停止表单提交。您的代码中是否仍有此内容？我刚刚更新了我的初始帖子，以反映我到目前为止的内容及其当前问题。@Charlie123

$(“##########”不是有效的jQuery选择器-只有一个“#”作为id，没有任何尾随。请检查我发布的代码-
$（“#frmComment”）
。同样地，
$（“##submitResponse”）
的所有用法都应该只有一个#。